@keyframes pulse{0%{transform:scale(.96);opacity:.7} to{transform:scale(1.07);opacity:0}} :root{--bg0:#0A0C20;--bg1:#14173A;--bg2:#1E2148;--ink:#F5F2EA;--mut:#A9ADCF;--line:rgba(255, 255, 255, 0.10);--line2:rgba(255, 255, 255, 0.22);--card:rgba(255, 255, 255, 0.06);--card2:rgba(255, 255, 255, 0.10);--sheet:#171A3C;--dock:rgba(14, 16, 40, 0.88);--feed:#F4B740;--feed-ink:#1B1D33;--feed-soft:rgba(244, 183, 64, 0.16);--acc-t:#F6C257;--slp:#8E9CFF;--slp-ink:#0E1030;--slp-soft:rgba(142, 156, 255, 0.18);--warn:#FFB4A8;--ok:#5FCB8B;--shadow:0 14px 40px rgba(0, 0, 0, 0.42);--hf:'Space Grotesk', 'Avenir Next', 'Segoe UI', system-ui, sans-serif;--bf:'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;--sb:env(safe-area-inset-bottom, 0px);--st:env(safe-area-inset-top, 0px)} html[data-phase=dusk]{--bg0:#272352;--bg1:#40356F;--bg2:#563C6E;--ink:#F8F3EC;--mut:#DDD7EE;--line:rgba(255, 255, 255, 0.14);--line2:rgba(255, 255, 255, 0.28);--card:rgba(255, 255, 255, 0.09);--card2:rgba(255, 255, 255, 0.14);--sheet:#342C66;--dock:rgba(40, 34, 82, 0.9);--feed:#F6BE52;--feed-soft:rgba(244, 183, 64, 0.13);--acc-t:#FFDD9C;--slp:#B7BFFF;--slp-soft:rgba(183, 191, 255, 0.16);--warn:#FFD3CB} html[data-phase=day],html[data-phase=golden],html[data-phase=morning]{--ink:#1B1D33;--mut:#5A5D75;--line:rgba(27, 29, 51, 0.10);--line2:rgba(27, 29, 51, 0.24);--card:rgba(255, 255, 255, 0.70);--card2:rgba(255, 255, 255, 0.92);--sheet:#FFFDF9;--dock:rgba(255, 253, 249, 0.92);--feed:#F4B740;--feed-soft:rgba(244, 183, 64, 0.24);--acc-t:#8A4B00;--slp:#4655C8;--slp-ink:#FFFFFF;--slp-soft:rgba(70, 85, 200, 0.12);--warn:#9B2C1B;--ok:#1E8E57;--shadow:0 12px 32px rgba(27, 29, 51, 0.10)} html[data-phase=morning]{--bg0:#FBE3C6;--bg1:#FBF0E0;--bg2:#F8F3EA} html[data-phase=day]{--bg0:#D6E6F8;--bg1:#EDF3FA;--bg2:#FAF9F5} html[data-phase=golden]{--bg0:#F7CF98;--bg1:#F8E3C4;--bg2:#F7ECDA;--mut:#5C5040;--acc-t:#7A4100} *{box-sizing:border-box} html{background:var(--bg0);color:var(--ink);font-family:var(--bf);font-size:16px;line-height:1.4;-webkit-text-size-adjust:100%} body{margin:0;min-height:100vh;min-height:100dvh;-webkit-tap-highlight-color:transparent;overscroll-behavior-y:none} body.lock{overflow:hidden} button,input{font:inherit;color:inherit} button{cursor:pointer;touch-action:manipulation;-webkit-user-select:none;user-select:none} [hidden]{display:none!important} :focus-visible{outline:3px solid var(--acc-t);outline-offset:2px} h1,h2,h3,p,ul{margin:0} .orb.sug .sm,a{color:var(--acc-t)} svg{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} #sky{position:fixed;inset:0;z-index:-1;background:linear-gradient(180deg,var(--bg0) 0%,var(--bg1) 46%,var(--bg2) 100%);transition:background 1.2s ease;overflow:hidden} #orb,#stars{position:absolute} #stars{inset:0;opacity:0;transition:opacity 1.2s ease;background-image:radial-gradient(1.2px 1.2px at 12% 9%,#fff,transparent 60%),radial-gradient(1px 1px at 31% 16%,#fff,transparent 60%),radial-gradient(1.4px 1.4px at 54% 6%,#fff,transparent 60%),radial-gradient(1px 1px at 71% 21%,#fff,transparent 60%),radial-gradient(1.2px 1.2px at 88% 11%,#fff,transparent 60%),radial-gradient(1px 1px at 22% 30%,#fff,transparent 60%),radial-gradient(1px 1px at 63% 33%,#fff,transparent 60%),radial-gradient(1.3px 1.3px at 93% 37%,#fff,transparent 60%),radial-gradient(1px 1px at 7% 44%,#fff,transparent 60%),radial-gradient(1px 1px at 44% 24%,#fff,transparent 60%)} html[data-phase=night] #stars{opacity:.7} html[data-phase=dusk] #stars{opacity:.35} #orb{width:150px;height:150px;border-radius:50%;margin:-75px 0 0-75px;left:82%;top:96px;background:radial-gradient(circle,rgba(255,214,120,.95)0 17%,rgba(255,205,110,.32) 18% 34%,rgba(255,205,110,.12) 35% 55%,transparent 70%);transition:left 1.2s ease,top 1.2s ease} html[data-phase=dusk] #orb,html[data-phase=night] #orb{background:radial-gradient(circle at 42% 42%,transparent 0 13%,transparent 13%),radial-gradient(circle,rgba(236,234,255,.92)0 15%,rgba(200,204,255,.16) 16% 36%,rgba(200,204,255,.06) 37% 56%,transparent 70%)} .boot{padding:28vh 28px 0;text-align:center;color:var(--mut)} .boot b{display:block;font-family:var(--hf);font-size:28px;color:var(--ink);margin-bottom:10px;letter-spacing:-.02em} #app{max-width:480px;margin:0 auto;padding:calc(10px + var(--st)) 16px calc(96px + var(--sb))} body.tab-today #app{padding-bottom:calc(268px + var(--sb))} #app,.tab{display:flex;flex-direction:column;gap:14px} .top,.who{display:flex;align-items:center} .top{justify-content:space-between;gap:10px;min-height:48px} .who{gap:9px;min-height:44px;padding:0 14px 0 5px;border-radius:24px;border:1px solid var(--line);background:var(--card);max-width:78%;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)} .icb,.who i{flex:none;border-radius:50%;display:grid;place-items:center} .who i{width:34px;height:34px;background:var(--feed);color:var(--feed-ink);font:700 15px var(--hf);font-style:normal} .who span{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .icb{width:46px;height:46px;border:1px solid var(--line);background:var(--card);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)} .icb svg{width:21px;height:21px} .hero{padding:14px 4px 4px;display:flex;flex-direction:column;gap:10px} .eye,.eye b{font-weight:700} .eye{display:flex;align-items:center;gap:10px;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--mut)} .eye b{padding:5px 10px;border-radius:12px;background:var(--card2);color:var(--ink);letter-spacing:.06em} .eye b:empty{display:none} .hero.hot .eye b{background:var(--feed);color:var(--feed-ink)} .hero h1{font-family:var(--hf);font-weight:600;font-size:36px;line-height:1.04;letter-spacing:-.035em;max-width:12.5em;text-wrap:balance} .hero h1.num{font-size:60px;letter-spacing:-.04em} .hero>p{font-size:15.5px;line-height:1.42;color:var(--ink);opacity:.86;max-width:34em} .hero.plain{padding-bottom:6px} .ask,.meter{display:flex;gap:10px} .ask .btn{flex:1} .meter{flex-direction:column;gap:7px;margin-top:4px} .mtrack{position:relative;height:12px;border-radius:6px;background:var(--card2);box-shadow:inset 0 0 0 1px var(--line)} .mfill,.msweet{top:0;bottom:0;border-radius:6px} .msweet{position:absolute;background:var(--feed-soft);box-shadow:inset 0 0 0 1.5px var(--feed)} .mfill{left:0;background:var(--ink);opacity:.28} .mbest,.mdot,.mfill{position:absolute} .mbest{top:-3px;bottom:-3px;width:2px;margin-left:-1px;border-radius:1px;background:var(--feed)} .mdot{top:50%;width:20px;height:20px;margin:-10px 0 0-10px;border-radius:50%;background:var(--ink);box-shadow:0 0 0 4px var(--bg1),0 2px 8px rgba(0,0,0,.3)} .mlabs{display:flex;justify-content:space-between;gap:12px;font-size:13px;color:var(--mut);font-weight:500} .mlabs span:last-child{text-align:right} .then{display:flex;flex-wrap:nowrap;gap:8px;align-items:center;overflow:hidden} .dlast b:empty,.then:empty{display:none} .card,.then span{background:var(--card);border:1px solid var(--line)} .then span{flex:0 1 auto;min-width:0;white-space:nowrap;font-size:13.5px;font-weight:600;padding:7px 12px;border-radius:16px;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)} .then span b{font-weight:500;color:var(--mut);margin-right:5px} .then span.yours{background:var(--feed-soft);border-color:transparent;color:var(--acc-t)} .card{border-radius:26px;padding:16px;display:flex;flex-direction:column;gap:12px;box-shadow:var(--shadow);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)} .card.flush{padding:4px 0} .card>header{display:flex;align-items:baseline;justify-content:space-between;gap:10px} .card h2,.num{font-family:var(--hf);font-weight:600;font-size:19px;letter-spacing:-.015em} .card .st{font-size:13.5px;color:var(--mut);text-align:right;font-weight:500} .card p{font-size:14.5px;color:var(--mut)} .card li b,.card p b{color:var(--ink);font-weight:600} .card.yours{background:var(--feed-soft);border-color:transparent} .num{font-size:40px;line-height:1;letter-spacing:-.03em} .small{font-size:12.5px!important;color:var(--mut)} .small.pad{padding:0 6px} .bullets{padding-left:20px;display:flex;flex-direction:column;gap:8px;font-size:15px} .rib{overflow-x:auto;overflow-y:hidden;margin:0-16px;padding:0 16px;scrollbar-width:none;-webkit-overflow-scrolling:touch;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 18px,#000 calc(100% - 18px),transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 18px,#000 calc(100% - 18px),transparent 100%)} .rib::-webkit-scrollbar{display:none} .rin{position:relative;height:98px} .rs,.rtrack{position:absolute;top:24px;height:46px} .rtrack{left:0;right:0;border-radius:15px;background:var(--card2);box-shadow:inset 0 0 0 1px var(--line)} .rs{border-radius:13px;border:0;padding:0 4px;background:var(--slp);color:var(--slp-ink);font:600 12.5px var(--bf);display:flex;align-items:center;justify-content:center;overflow:hidden;white-space:nowrap} .rs.g{background:0 0;border:1.5px dashed var(--slp);color:var(--slp);opacity:.75} .rs.open{border-radius:13px 4px 4px 13px} .rf,.rf::before{position:absolute;background:var(--feed)} .rf{top:5px;width:12px;height:12px;margin-left:-6px;border-radius:50%;border:0;padding:0} .rf::before{content:'';left:5px;top:12px;width:2px;height:53px;opacity:.5;border-radius:1px} .rf::after{content:'';inset:-14px -9px -50px} .rf.g{background:0 0;box-shadow:inset 0 0 0 1.5px var(--feed);opacity:.8} .rf.g::before{opacity:.18} .rf::after,.rh,.rnow{position:absolute} .rnow,.rnow::before{background:var(--ink)} .rnow{top:14px;height:66px;width:2.5px;margin-left:-1.25px;border-radius:2px} .rnow::before{content:'';position:absolute;left:-4.75px;top:-8px;width:12px;height:12px;border-radius:50%} .rh{bottom:0;font-size:11px;color:var(--mut);transform:translateX(-50%);white-space:nowrap;font-weight:500} .rh:first-of-type{transform:none} .rh.end{transform:translateX(-100%)} .legend,.sync{font-size:12px;color:var(--mut)} .legend{display:flex;flex-wrap:wrap;gap:6px 16px;font-weight:500} .legend i,.sync i{display:inline-block;margin-right:6px} .legend i{width:12px;height:12px;border-radius:4px;vertical-align:-1.5px} .legend .ls{background:var(--slp)} .legend .lf{border-radius:50%;background:var(--feed)} .legend .lg{border:1.5px dashed var(--slp)} .sync{text-align:center} .sync i{width:8px;height:8px;border-radius:50%;background:var(--mut)} .sync i.ok{background:var(--ok)} .sync i.bad{background:var(--warn)} .dock{display:none;position:fixed;left:0;right:0;bottom:calc(64px + var(--sb));z-index:12;padding:10px 14px 12px;background:var(--dock);border-top:1px solid var(--line);border-radius:26px 26px 0 0;box-shadow:0-10px 30px rgba(0,0,0,.14);-webkit-backdrop-filter:blur(22px);backdrop-filter:blur(22px)} body.tab-today .dock{display:block} .dock>*{max-width:452px;margin-left:auto;margin-right:auto} .dlast,.dline{min-height:44px;display:flex;align-items:center} .dline{gap:8px;margin-bottom:8px} .dlast{flex:1;min-width:0;justify-content:space-between;gap:10px;padding:0 6px 0 14px;border-radius:16px;border:1px solid var(--line);background:var(--card);text-align:left} .dlast span{font-size:13.5px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .dlast b{flex:none;font-size:13px;font-weight:700;color:var(--acc-t);padding:7px 10px;border-radius:11px} .dlast:disabled{opacity:.7} .addb,.undob{flex:none;min-height:44px;border-radius:16px} .undob{padding:0 16px;border:0;background:var(--ink);color:var(--bg0);font-size:14px;font-weight:700} .addb{padding:0 14px 0 10px;border:1px solid var(--line);background:0 0;display:flex;align-items:center;gap:4px;font-size:13.5px;font-weight:600} .addb svg{width:18px;height:18px} .mlrow{display:flex;gap:8px;margin-bottom:10px;overflow-x:auto;scrollbar-width:none} .orb,.pad,.slp{display:flex;gap:10px;align-items:stretch} .orb,.slp{height:88px;flex-direction:column;align-items:center;justify-content:center;gap:1px;position:relative} .orb{flex:none;width:88px;border-radius:50%;border:2px solid var(--line2);background:var(--card);transition:transform .12s ease,background-color .2s ease,border-color .2s ease} .orb:active,.slp:active{transform:scale(.96)} .orb .big{font:600 32px/1 var(--hf);letter-spacing:-.02em;font-variant-numeric:tabular-nums} .orb .sm{font-size:11.5px;font-weight:600;color:var(--mut)} .orb.on,.orb.sug{border-color:var(--feed)} .orb.sug{border-width:3px} .orb.on{background:var(--feed)} .orb.on .big{font-size:24px} .orb.on,.orb.on .sm{color:var(--feed-ink)} .orb.on .sm{opacity:.8} .orb.on::after{inset:-7px} .orb.hot::before,.orb.on::after,.slp.on::after{content:'';position:absolute;border-radius:inherit;border:2px solid var(--feed);opacity:.6;animation:pulse 1.9s ease-out infinite;pointer-events:none} .orb.hot::before{inset:-7px;border-radius:50%;opacity:.5} .slp{flex:1;min-width:0;border-radius:28px;border:2px solid transparent;background:var(--slp-soft);color:var(--ink);transition:transform .12s ease,background-color .2s ease} .slp svg{width:22px;height:22px;color:var(--slp);margin-bottom:2px} .slp .big{font:600 19px/1.1 var(--hf);letter-spacing:-.01em} .slp .sm{font-size:11.5px;font-weight:600;color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:94%} .slp.on::after,.slp.sug{border-color:var(--slp)} .slp.on{background:var(--slp);color:var(--slp-ink)} .orb.B.on .big svg,.slp.on svg,body.both .slp svg{display:none} .slp.on .big{font-size:26px} .slp.on .sm{color:var(--slp-ink);opacity:.85} .slp.on::after{inset:-6px} body.breast .orb.B:not(.on),body.formula .orb.L,body.formula .orb.R{display:none} body.both .orb{width:68px;height:68px} body.both .orb .big{font-size:25px} body.both .orb.on .big{font-size:18px} body.both .orb .sm{font-size:10.5px} body.both .slp{height:68px} .orb.B .big svg{width:30px;height:30px;display:block} .toast{position:fixed;left:12px;right:12px;bottom:calc(262px + var(--sb));max-width:456px;margin:0 auto;background:var(--ink);color:var(--bg0);border-radius:18px;padding:8px 8px 8px 16px;display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:14px;font-weight:600;z-index:30;box-shadow:0 10px 30px rgba(0,0,0,.3)} body:not(.tab-today) .toast{bottom:calc(80px + var(--sb))} body.tab-day .toast{bottom:calc(146px + var(--sb))} .toast button{min-height:44px;padding:0 16px;border-radius:13px;border:0;background:var(--feed);color:var(--feed-ink);font-weight:700;flex:none} .tabs{position:fixed;left:0;right:0;bottom:0;display:flex;justify-content:center;background:var(--dock);padding:4px 8px calc(4px + var(--sb));z-index:14;-webkit-backdrop-filter:blur(22px);backdrop-filter:blur(22px)} body:not(.tab-today) .tabs{border-top:1px solid var(--line)} .tabs button{flex:1;max-width:116px;min-height:56px;border:0;background:0 0;color:var(--mut);font-size:11.5px;font-weight:600;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px} .tabs button svg{width:23px;height:23px} .tabs button[aria-current=page]{color:var(--ink)} .tabs button[aria-current=page] svg{color:var(--acc-t)} .btn{min-height:52px;padding:0 20px;border-radius:18px;border:1.5px solid var(--line2);background:0 0;font-size:16px;font-weight:700} .btn.pri{background:var(--feed);border-color:var(--feed);color:var(--feed-ink)} .btn.wide{width:100%} .btn.danger{border-color:transparent;color:var(--warn);padding:0 14px} .btn:disabled{opacity:.4} .chips{display:flex;flex-wrap:wrap;gap:8px} .chip,.msg{font-weight:600} .chip{min-height:44px;min-width:52px;padding:0 14px;border-radius:22px;border:1.5px solid var(--line2);background:0 0;font-size:14.5px;white-space:nowrap;flex:none} .chip[aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:var(--sheet)} .chip.k{min-width:74px} .msg{font-size:13.5px;color:var(--warn)} .msg:empty{display:none} .field{display:flex;flex-direction:column;gap:6px;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--mut)} .field input{min-height:56px;padding:0 16px;border-radius:18px;border:1.5px solid var(--line2);background:var(--card);color:var(--ink);font:600 20px var(--hf);letter-spacing:-.01em;text-transform:none;width:100%} .field input::placeholder{color:var(--mut);opacity:.6;font-weight:500} .tiles small,.tt small,h3{font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--mut)} h3{font-size:12px;margin-bottom:6px} .seg3{display:flex;padding:4px;gap:4px;border-radius:18px;background:var(--card2);box-shadow:inset 0 0 0 1px var(--line)} .seg3 button{flex:1;min-height:44px;border:0;border-radius:14px;background:0 0;font-size:14.5px;font-weight:600;color:var(--mut);padding:0 6px} .seg3 button[aria-pressed=true]{background:var(--ink);color:var(--sheet)} .sheet{position:fixed;inset:0;z-index:50;background:rgba(6,7,20,.55);display:flex;align-items:flex-end;opacity:0;transition:opacity .2s ease} .sheet.in{opacity:1} .panel{width:100%;max-width:480px;margin:0 auto;max-height:94vh;max-height:94dvh;overflow-y:auto;overflow-x:hidden;background:var(--sheet);border-radius:30px 30px 0 0;padding:10px 18px calc(18px + var(--sb));transform:translateY(40px);transition:transform .3s cubic-bezier(.2,.9,.3,1.08);box-shadow:0-20px 60px rgba(0,0,0,.35)} .sheet.in .panel{transform:none} .grab{display:block;width:42px;height:5px;border-radius:3px;background:var(--line2);margin:0 auto 10px} #sh-c,.shh{display:flex} #sh-c{flex-direction:column;gap:16px} .shh{align-items:center;justify-content:space-between;gap:10px} .shh h2,.tt b{letter-spacing:-.02em} .shh h2{font-family:var(--hf);font-weight:600;font-size:24px} .x{flex:none;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:var(--card);display:grid;place-items:center} .x svg{width:20px;height:20px} .tt,.tts{display:flex;gap:10px} .tt{flex:1;min-width:0;text-align:left;padding:11px 14px 12px;border-radius:20px;border:1.5px solid var(--line);background:0 0;flex-direction:column;gap:2px} .tiles small,.tt small{font-size:11.5px} .tt b{font:600 26px/1.1 var(--hf);font-variant-numeric:tabular-nums} .durl,.tt span{color:var(--mut)} .tt span{font-size:12.5px;font-weight:500} .tt[aria-pressed=true]{border-color:var(--feed);background:var(--feed-soft)} .durl{text-align:center;font:600 17px var(--hf)} .durl b{color:var(--ink);font-weight:600} .scw{position:relative;margin:0-18px} .scw::after,.scw::before{content:'';position:absolute;top:0;bottom:0;width:56px;z-index:2;pointer-events:none} .scw::before{left:0;background:linear-gradient(90deg,var(--sheet),transparent)} .scw::after{right:0;background:linear-gradient(270deg,var(--sheet),transparent)} .scr{overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch} .scr::-webkit-scrollbar{display:none} .rail{position:relative;height:72px;background-repeat:repeat-x;background-size:8px 10px,40px 20px,120px 30px;background-image:linear-gradient(90deg,var(--line2)0 1px,transparent 1px),linear-gradient(90deg,var(--mut)0 1.5px,transparent 1.5px),linear-gradient(90deg,var(--ink)0 2px,transparent 2px)} .pin,.rail span{position:absolute} .rail span{top:6px;transform:translateX(-50%);font-size:12px;font-weight:600;color:var(--mut);white-space:nowrap} .pin{left:50%;top:26px;bottom:0;width:4px;margin-left:-2px;border-radius:2px;background:var(--feed);z-index:3;pointer-events:none} .pin::before{content:'';position:absolute;left:-6px;top:-8px;border:8px solid transparent;border-top-color:var(--feed);border-bottom:0} .nud{display:flex;gap:6px;justify-content:space-between} .nud .chip{flex:1;min-width:0;padding:0 4px} .acts,.step{display:flex;align-items:center} .step{justify-content:space-between;gap:12px} .step b{font:600 30px var(--hf);letter-spacing:-.02em;font-variant-numeric:tabular-nums} .step button{width:56px;height:56px;border-radius:50%;border:1.5px solid var(--line2);background:0 0;font:500 26px/1 var(--hf)} .acts{gap:10px;position:sticky;bottom:0;margin:0-18px calc(-18px - var(--sb));padding:12px 18px calc(18px + var(--sb));background:var(--sheet);z-index:2;box-shadow:0-14px 14px -10px var(--sheet)} .acts .pri{flex:1} .note,.row .m small{font-size:13px;color:var(--mut)} .dob::before,.hand{background:var(--card2);box-shadow:inset 0 0 0 1px var(--line)} .hand{white-space:pre-wrap;font-size:15.5px;line-height:1.5;padding:16px;border-radius:20px} .rule{height:1px;background:var(--line)} .dob,.wheel{position:relative} .dob{display:flex;gap:6px} .dob::before{content:'';position:absolute;left:0;right:0;top:80px;height:40px;border-radius:14px;pointer-events:none} .wheel{flex:1;height:200px;overflow-y:auto;scroll-snap-type:y mandatory;scrollbar-width:none;padding:80px 0;text-align:center;-webkit-mask-image:linear-gradient(180deg,transparent,#000 34%,#000 66%,transparent);mask-image:linear-gradient(180deg,transparent,#000 34%,#000 66%,transparent)} .strip::-webkit-scrollbar,.wheel::-webkit-scrollbar{display:none} .wheel div{height:40px;line-height:40px;scroll-snap-align:center;font:500 18px/40px var(--hf);color:var(--mut)} .wheel div.sel{color:var(--ink);font-weight:700;font-size:21px} .wheel.m{flex:1.5} .strip{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;margin:0-16px;padding:2px 16px} .pills span,.strip button{font-weight:600;background:var(--card);border:1px solid var(--line)} .strip button{flex:none;width:46px;height:62px;border-radius:18px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:11px;color:var(--mut)} .strip button b{font:600 18px var(--hf);color:var(--ink)} .strip button[aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:var(--bg1)} .strip button[aria-pressed=true] b{color:var(--bg0)} .ttl{font:600 28px/1.1 var(--hf);letter-spacing:-.03em;padding:4px 4px 0} .pills{display:flex;flex-wrap:wrap;gap:8px} .pills span{font-size:13.5px;padding:8px 13px;border-radius:16px} .pills span b{font-family:var(--hf);font-size:15px;margin-right:5px} .list{list-style:none;padding:0} .row{display:flex;align-items:center;gap:12px;width:100%;min-height:62px;padding:8px 14px 8px 16px;border:0;border-top:1px solid var(--line);background:0 0;text-align:left} .list li:first-child .row{border-top:0} .row .t{flex:none;width:60px;font-size:13.5px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--mut)} .ic{flex:none;width:38px;height:38px;border-radius:13px;display:grid;place-items:center;font:700 15px var(--hf)} .ic svg{width:19px;height:19px} .ic.S{background:var(--slp-soft);color:var(--slp)} .ic.F{background:var(--feed-soft);color:var(--acc-t)} .empty,.ic.W,.row.awake .m b{color:var(--mut)} .ic.W{border:1.5px dashed var(--line2)} .row .m{flex:1;min-width:0;display:flex;flex-direction:column} .row .m b{font-size:15.5px;font-weight:600} .row.awake .m b{font-weight:500} .row .ch{flex:none;width:18px;height:18px;color:var(--mut);opacity:.7} .empty{padding:18px 16px;font-size:14.5px} .chart .n.now i,.fab{background:var(--feed)} .chart .n,.fab{align-items:center} .fab{position:fixed;right:max(16px,calc(50% - 224px));bottom:calc(80px + var(--sb));z-index:13;min-height:54px;padding:0 20px 0 14px;border-radius:27px;border:0;color:var(--feed-ink);font-size:16px;font-weight:700;display:flex;gap:6px;box-shadow:0 10px 26px rgba(0,0,0,.28)} .fab svg{width:22px;height:22px;stroke-width:2.4} .chart{align-items:flex-end;gap:5px;height:150px} .chart .n{flex:1;min-width:0;height:100%;flex-direction:column;justify-content:flex-end;gap:4px;font-size:10.5px;font-weight:600;color:var(--mut)} .chart .n i{width:100%;border-radius:7px 7px 3px 3px;background:var(--slp);opacity:.42;min-height:4px} .chart .n.now i{opacity:1} .chart .n.none i{background:var(--line2);opacity:.6} .chart .n b{font-size:10.5px;color:var(--ink);white-space:nowrap;letter-spacing:-.02em} .chart,.chart .n,.kv,.kv li{display:flex} .kv{list-style:none;padding:0;flex-direction:column} .kv li{justify-content:space-between;gap:12px;padding:11px 0;border-top:1px solid var(--line);font-size:14.5px;color:var(--mut)} .kv li:first-child{border-top:0;padding-top:2px} .kv li b{font:600 16px var(--hf);color:var(--ink);text-align:right} .bal{display:flex;flex-direction:column;gap:8px} .balbar{height:12px;border-radius:6px;background:var(--slp);overflow:hidden} .balbar i{display:block;height:100%;background:var(--feed);border-radius:6px 0 0 6px} .tiles,.times{display:grid;grid-template-columns:1fr 1fr;gap:10px} .onb .in,.tiles div{display:flex;flex-direction:column} .tiles div{padding:14px;border-radius:22px;background:var(--card);border:1px solid var(--line);gap:4px;box-shadow:var(--shadow);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)} .tiles b{font:600 20px/1.15 var(--hf);letter-spacing:-.02em} .tiles span{font-size:12.5px} .times{list-style:none;padding:0;gap:6px 14px;font-size:13.5px} .tiles span,.times li{color:var(--mut)} .times b{min-width:58px;color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums} .onb{position:fixed;inset:0;z-index:60;overflow:auto} .onb .in{max-width:480px;margin:0 auto;min-height:100%;padding:calc(26px + var(--st)) 22px calc(26px + var(--sb));gap:20px} .times li,.wm{display:flex;gap:8px} .wm{font:700 28px var(--hf);letter-spacing:-.03em;align-items:center} .wm svg{width:30px;height:30px;stroke:none} .onb h1{font:600 38px/1.04 var(--hf);letter-spacing:-.035em;text-wrap:balance} .onb p{font-size:16px;color:var(--ink);opacity:.85} .onb .grow{flex:1} .check,.steps{display:flex;gap:6px} .steps i{height:4px;flex:1;border-radius:2px;background:var(--line2)} .steps i.on{background:var(--feed)} .check{gap:12px;align-items:flex-start;font-size:15px;min-height:44px;padding:14px;border-radius:20px;background:var(--card);border:1px solid var(--line)} .check input{flex:none;width:26px;height:26px;margin:0;accent-color:var(--feed)} @media (max-width:359px){.hero h1{font-size:30px} .orb{width:76px} .orb .big{font-size:27px} .orb,.slp{height:76px} body.both .orb{width:58px;height:58px} .tt b,body.both .orb .big{font-size:22px} body.both .slp{height:58px} body.both .orb .sm{font-size:10px} .onb h1{font-size:32px} .who span{font-size:13px}} @media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}} body.onbing #orb{left:90%!important;top:26px!important;opacity:.85} @media (max-width:389px){.then{gap:6px} .then span{font-size:12.5px;padding:7px 9px} .then span b{margin-right:4px}} @media (max-width:345px){.chip{padding:0 11px;font-size:14px} .chip.k{min-width:0;flex:1 1 0;padding:0 4px}} @media (max-height:700px){#sh-c{gap:11px} .shh h2{font-size:21px} .tt{padding:8px 12px 9px} .tt b{font-size:23px} .durl{font-size:15.5px}} .kick{flex-wrap:nowrap} .kick .chip{flex:1 1 0;min-width:0;padding:0 4px;font-size:14px;background:var(--card);border-color:var(--line2);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}