@font-face{font-family:Onest;src:url(fonts/onest-latin.woff2) format("woff2");font-weight:100 900;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122;font-display:swap}
@font-face{font-family:Onest;src:url(fonts/onest-cyrillic.woff2) format("woff2");font-weight:100 900;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;font-display:swap}
@font-face{font-family:SrcSerif;src:url(fonts/serif-latin-italic.woff2) format("woff2");font-weight:200 900;font-style:italic;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122;font-display:swap}
@font-face{font-family:SrcSerif;src:url(fonts/serif-cyrillic-italic.woff2) format("woff2");font-weight:200 900;font-style:italic;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;font-display:swap}
:root{--sans:Onest,system-ui,sans-serif;--serif:SrcSerif,Georgia,serif}
/* ДЕНЬ: тёплое небо, солнце. НОЧЬ: индиго, месяц и звёзды. Переключается по часам или вручную */
body{--ink:#33284F;--mute:#7A7096;--card:rgba(255,255,255,.72);--line:rgba(120,100,170,.2);--acc:#F29A3C;--atx:#B35F12;--acc2:#FFC36B;--acc-ink:#3A2406;--track:rgba(120,100,170,.18);--soft:#EFE9FB;--blush:#F9D5DD;--btn:rgba(255,255,255,.8);--sheet:#FFFBF7;--scenebg:linear-gradient(180deg,#F3ECFF,#FFEFE4)}
body[data-sky=night]{--ink:#EEF0FF;--mute:#A3A9D2;--card:rgba(30,34,80,.62);--line:#2F3566;--acc:#FFB547;--atx:#FFB547;--acc2:#FF8A3D;--acc-ink:#1B1200;--track:#222850;--soft:#262B5E;--blush:#3A2E5E;--btn:rgba(38,43,94,.8);--sheet:#171A44;--scenebg:linear-gradient(180deg,#262B66,#1A1E52)}
*{box-sizing:border-box;margin:0;-webkit-tap-highlight-color:transparent}
html{background:#0B0D1C}
body{font-family:var(--sans);color:var(--ink);min-height:100dvh;max-width:480px;margin:0 auto;padding:70px 18px 112px;position:relative;isolation:isolate;transition:color .8s}
body::before,body::after{content:"";position:fixed;inset:0;z-index:-3;transition:opacity 1.1s}
body::before{background:radial-gradient(120% 60% at 50% 0,#FFE9C9 0,transparent 62%),linear-gradient(180deg,#FFEBD9,#E5DEF8 80%)}
body::after{background:radial-gradient(120% 60% at 50% -5%,#2D3290 0,transparent 62%),linear-gradient(180deg,#171A4A,#0B0D1C 85%)}
body[data-sky=day]::after{opacity:0}body[data-sky=night]::before{opacity:0}
/* когда малыш спит, всё чуть темнее и тише */
.dim{position:fixed;inset:0;z-index:-1;background:#0A0A22;opacity:0;pointer-events:none;transition:opacity 1.2s}
body[data-state=asleep] .dim{opacity:.28}
.stars{position:fixed;inset:0;z-index:-2;pointer-events:none;opacity:0;transition:opacity 1.2s;background-image:radial-gradient(1.6px 1.6px at 12% 14%,#fff,transparent),radial-gradient(1px 1px at 28% 8%,#fff,transparent),radial-gradient(1.6px 1.6px at 64% 11%,#fff,transparent),radial-gradient(1px 1px at 84% 20%,#fff,transparent),radial-gradient(1.4px 1.4px at 46% 26%,#fff,transparent),radial-gradient(1px 1px at 92% 5%,#fff,transparent),radial-gradient(1px 1px at 18% 34%,#fff,transparent),radial-gradient(1.4px 1.4px at 74% 36%,#fff,transparent)}
body[data-sky=night] .stars{opacity:.95}
.clouds{position:fixed;inset:0;z-index:-2;pointer-events:none;opacity:0;transition:opacity 1.2s;overflow:hidden}
body[data-sky=day] .clouds{opacity:1}
.clouds i{position:absolute;height:34px;border-radius:99px;background:rgba(255,255,255,.7);filter:blur(1px)}
.clouds i::before,.clouds i::after{content:"";position:absolute;background:inherit;border-radius:50%}
.clouds i::before{width:44px;height:44px;left:16px;top:-22px}.clouds i::after{width:30px;height:30px;right:18px;top:-14px}
.clouds i:nth-child(1){width:120px;left:-20px;top:150px}.clouds i:nth-child(2){width:90px;right:-10px;top:310px;opacity:.7}.clouds i:nth-child(3){width:100px;left:30%;top:560px;opacity:.55}
@media (prefers-reduced-motion:no-preference){.clouds i{animation:dr 30s linear infinite alternate}.clouds i:nth-child(2){animation-duration:40s}.clouds i:nth-child(3){animation-duration:50s}}
@keyframes dr{to{transform:translateX(36px)}}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
.head{position:absolute;top:18px;left:18px;right:18px;display:flex;justify-content:space-between;align-items:center}
.head h1{font-size:14px;font-weight:600;color:var(--mute)}.head h1 b{color:var(--ink)}
.modes{display:flex;gap:2px;padding:3px;border-radius:99px;background:var(--card);border:1px solid var(--line);backdrop-filter:blur(10px)}
.modes button{min-width:40px;height:30px;padding:0 10px;border-radius:99px;font-size:12px;font-weight:600;color:var(--mute);display:grid;place-content:center}
.modes button[aria-pressed=true]{background:var(--acc);color:var(--acc-ink)}
.modes svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.hello{text-align:center;font-family:var(--serif);font-style:italic;font-size:17px;color:var(--mute);margin-top:4px;min-height:26px}
/* кольцо бодрствования со светилом внутри */
.dial{position:relative;width:min(80vw,326px);aspect-ratio:1;margin:8px auto 4px}
.dial>svg.ring{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.ring .track{fill:none;stroke:var(--track);stroke-width:13}
.ring .arc{fill:none;stroke:url(#rg);stroke-width:13;stroke-linecap:round;transition:stroke-dasharray 1s linear}
.ring .zone{fill:none;stroke:var(--acc);stroke-width:13;stroke-linecap:round;filter:drop-shadow(0 0 9px var(--acc));transition:opacity .8s}
.ring .dot{fill:#fff;filter:drop-shadow(0 0 8px #fff);transition:opacity .8s}
body[data-state=asleep] .ring .zone,body[data-state=asleep] .ring .dot{opacity:0}
.sky{position:absolute;left:50%;top:15%;width:34%;aspect-ratio:1;transform:translateX(-50%)}
.sky svg{position:absolute;inset:-14%;width:128%;height:128%;overflow:visible;transition:opacity 1s,transform 1s}
.sun{opacity:1}.moon{opacity:0;transform:translateY(24px) rotate(-14deg)}
body[data-sky=night] .sun{opacity:0;transform:translateY(-24px) rotate(14deg)}
body[data-sky=night] .moon{opacity:1;transform:none}
.eyes-o,.mouth-o{transition:opacity .5s}.eyes-c,.mouth-c{opacity:0;transition:opacity .5s}
body[data-state=asleep] .eyes-o,body[data-state=asleep] .mouth-o{opacity:0}
body[data-state=asleep] .eyes-c,body[data-state=asleep] .mouth-c{opacity:1}
.rays{transform-origin:50% 50%}
@media (prefers-reduced-motion:no-preference){.rays{animation:spin 40s linear infinite}body[data-state=asleep] .rays{animation-duration:120s}.sun,.moon{animation:bob 6s ease-in-out infinite}.tw{animation:tw 3.2s ease-in-out infinite}.tw2{animation-delay:1.2s}.zz{animation:fl 3.4s ease-in-out infinite}.zz2{animation-delay:1.4s}}
@keyframes spin{to{transform:rotate(360deg)}}@keyframes bob{50%{translate:0 -4px}}@keyframes tw{50%{opacity:.25}}@keyframes fl{50%{transform:translateY(-7px);opacity:.4}}
.zzw{position:absolute;right:-26%;top:-8%;font-family:var(--serif);font-style:italic;font-weight:600;color:var(--atx);opacity:0;transition:opacity .8s;font-size:22px}
body[data-state=asleep] .zzw{opacity:.9}
.mid{position:absolute;left:0;right:0;bottom:15%;text-align:center;display:grid;gap:3px}
.mid small{font-size:11px;color:var(--mute);letter-spacing:.1em;text-transform:uppercase}
.mid strong{font-size:34px;font-weight:700;letter-spacing:-.03em;font-feature-settings:"tnum"}
.mid em{font-style:normal;font-size:13px;font-weight:600;color:var(--atx)}
body[data-state=asleep] .only-awake,body[data-state=awake] .only-asleep{display:none}
.card{background:var(--card);border:1px solid var(--line);border-radius:28px;padding:16px 20px;margin-top:12px;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:0 18px 40px -28px rgba(30,20,80,.55);transition:background .8s}
.next{display:flex;justify-content:space-between;align-items:center;gap:12px}
.next .k{font-size:11px;color:var(--mute);letter-spacing:.08em;text-transform:uppercase}
.next .v{font-size:28px;font-weight:700;letter-spacing:-.02em;margin-top:3px;font-feature-settings:"tnum"}
.next .conf{text-align:right;font-size:12px;color:var(--mute)}.next .conf i{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--acc);margin-left:3px}.next .conf i.off{background:var(--track)}
.acts{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:10px;margin:14px 0}
.acts button{display:grid;gap:6px;justify-items:center;padding:14px 6px;border-radius:24px;background:var(--btn);border:1px solid var(--line);font-size:13px;font-weight:600;backdrop-filter:blur(12px)}
.acts button.main{background:linear-gradient(160deg,var(--acc2),var(--acc));color:var(--acc-ink);border-color:transparent;box-shadow:0 12px 30px -10px var(--acc)}
.acts svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
details{margin-top:12px;font-size:14px;line-height:1.55;color:var(--mute)}
summary{cursor:pointer;font-family:var(--serif);font-style:italic;font-size:17px;color:var(--ink);list-style:none}summary::-webkit-details-marker{display:none}
details p{margin-top:6px}
.pill{display:inline-block;margin:10px 6px 0 0;padding:5px 11px;border-radius:99px;font-size:12px;font-weight:600;background:var(--soft);color:var(--ink)}
.pill.b{background:var(--blush)}
.row{display:flex;justify-content:space-between;font-size:14px;padding:12px 0;border-top:1px solid var(--line)}.row:first-child{border-top:0}.row span{color:var(--mute)}.row b{font-weight:600;font-feature-settings:"tnum"}
.tlw h3{font-size:11px;color:var(--mute);letter-spacing:.08em;text-transform:uppercase;font-weight:600;margin-bottom:10px}
.tl{position:relative;height:26px;border-radius:99px;background:var(--track);overflow:hidden}
.tl i{position:absolute;top:0;bottom:0}.tl-sleep{background:linear-gradient(180deg,#8E7CC3,#6A5BA8)}.tl-feed{width:5px!important;border-radius:3px;top:7px!important;bottom:7px!important;background:var(--acc)}
.tl-pred{background:repeating-linear-gradient(135deg,var(--acc) 0 3px,transparent 3px 7px);opacity:.8}.tl-now{width:2px!important;background:var(--ink)}
.tl-axis{display:flex;justify-content:space-between;font-size:11px;color:var(--mute);margin-top:6px}
/* экран «Ночь»: чёрный, одна кнопка, ничего лишнего. Не зависит от дня и ночи */
body[data-active=night]{--ink:#B4A27A;--mute:#5E5B72}
body[data-active=night]::before,body[data-active=night]::after{opacity:0}
body[data-active=night]{background:#04050B}
body[data-active=night] .head,body[data-active=night] .stars,body[data-active=night] .clouds,body[data-active=night] .dim{display:none}
body[data-active=night] .tabbar{background:#0A0C18;border-color:#1B1F3A}body[data-active=night] .tabbar button{color:#585D80}body[data-active=night] .tabbar button[aria-current=page]{background:#4A3512;color:#E9B35C}
.nightscr{display:grid;gap:14px;min-height:calc(100dvh - 200px);align-content:center;text-align:center}
.nightscr .clock{font-size:60px;font-weight:300;color:#6F5B35;letter-spacing:-.02em;font-feature-settings:"tnum"}
.nightscr .hint{font-size:14px;color:#585D80}
.bigmoon{position:relative;width:min(62vw,250px);aspect-ratio:1;margin:6px auto;border-radius:50%;display:grid;place-content:center;gap:4px;background:radial-gradient(circle at 50% 35%,#4D3610,#241906);border:1px solid #4A3512;color:#E9B35C;font-size:20px;font-weight:600;box-shadow:0 0 60px -10px rgba(255,181,71,.22)}
.bigmoon small{font-size:12px;font-weight:400;color:#8A6A33}
.bigmoon svg{width:46px;height:46px;margin:0 auto 4px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:10px}.pair button{padding:16px;border-radius:18px;background:#0D0F1E;border:1px solid #1B1F3A;color:#7A7FA6;font-size:15px}
.bars{display:flex;gap:12px;align-items:flex-end;height:92px;margin:12px 0}.bars div{flex:1;border-radius:20px 20px 8px 8px;display:flex;align-items:flex-start;justify-content:center;padding-top:8px;font-family:var(--serif);font-style:italic;font-size:22px;font-weight:600;color:#1B1200}
.share{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:12px}.share span{font-size:12px;color:var(--mute)}
.share button{padding:12px 16px;border-radius:99px;background:var(--acc);color:var(--acc-ink);font-weight:700;font-size:14px;white-space:nowrap}
.ptitle{font-family:var(--serif);font-style:italic;font-size:28px}
.tabbar{position:fixed;left:50%;transform:translateX(-50%);bottom:max(14px,env(safe-area-inset-bottom));z-index:30;display:flex;gap:4px;padding:6px;border-radius:99px;background:var(--card);backdrop-filter:blur(16px);border:1px solid var(--line)}
.tabbar button{padding:12px 20px;border-radius:99px;font-size:14px;font-weight:600;color:var(--mute);min-height:44px}
.tabbar button[aria-current=page]{background:var(--acc);color:var(--acc-ink)}
:focus-visible{outline:2px solid var(--acc);outline-offset:2px}

/* ---------- Сцены: ожившие рисунки разделов ---------- */
.scenebox{border-radius:26px;background:var(--scenebg);padding:6px 6px 0;margin:8px 0 12px;overflow:hidden}
.scene{display:block;width:100%;height:auto;max-height:220px}
.cheek{transform-box:fill-box;transform-origin:center}
.bot{transform:translate(133px,104px) rotate(-24deg)}
.heart,.spark{transform-box:fill-box;transform-origin:center}
.bub circle{transform-box:fill-box;transform-origin:center;opacity:.8}
@media (prefers-reduced-motion:no-preference){
  .scene.live .cheek{animation:suck 1.1s ease-in-out infinite}
  .scene .bot{animation:botb 2.4s ease-in-out infinite}
  .scene .milk{transform-box:fill-box;transform-origin:left center;animation:drain 10s ease-in-out infinite alternate}
  .scene .heart{opacity:0;animation:rise 3.6s ease-in infinite}
  .scene .heart.h2{animation-delay:1.2s}.scene .heart.h3{animation-delay:2.4s}
  .scene .beat{animation:beat 1.6s ease-in-out infinite}
  .scene .leg{animation:kick 1.5s ease-in-out infinite alternate}
  .scene .leg.l2{animation-delay:-.75s}
  .scene .arm{animation:wave 1.8s ease-in-out infinite alternate}
  .scene .bub circle{opacity:0;animation:rise2 4s ease-in infinite}.scene .bub .b2{animation-delay:1.3s}.scene .bub .b3{animation-delay:2.6s}
  .scene .spark{animation:tw2 2.4s ease-in-out infinite}.scene .spark.s2{animation-delay:1.1s}
}
@keyframes suck{50%{transform:scale(1.14)}}
@keyframes botb{0%,100%{transform:translate(133px,104px) rotate(-24deg)}50%{transform:translate(133px,105.5px) rotate(-26deg)}}
@keyframes drain{from{transform:scaleX(1)}to{transform:scaleX(.3)}}
@keyframes rise{0%{opacity:0;transform:translateY(8px) scale(.6)}25%{opacity:1}100%{opacity:0;transform:translateY(-28px) scale(1.1)}}
@keyframes beat{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}}
@keyframes kick{from{transform:rotate(-10deg)}to{transform:rotate(20deg)}}
@keyframes wave{from{transform:rotate(-10deg)}to{transform:rotate(16deg)}}
@keyframes rise2{0%{opacity:0;transform:translateY(10px) scale(.7)}30%{opacity:.9}100%{opacity:0;transform:translateY(-34px) scale(1.15)}}
@keyframes tw2{50%{opacity:.25;transform:scale(.7)}}

/* ---------- Листы (кормление, подгузник) ---------- */
.sheet-wrap{position:fixed;inset:0;z-index:60}
.sheet-wrap[hidden]{display:none}
.back{position:absolute;inset:0;background:rgba(6,7,24,.55);backdrop-filter:blur(4px);opacity:0;transition:opacity .35s}
.sheet{position:absolute;left:0;right:0;bottom:0;max-width:480px;margin:0 auto;max-height:94dvh;overflow:auto;background:var(--sheet);color:var(--ink);border-radius:32px 32px 0 0;padding:10px 18px calc(20px + env(safe-area-inset-bottom));transform:translateY(100%);transition:transform .42s cubic-bezier(.2,.8,.2,1);outline:none;box-shadow:0 -20px 60px -20px rgba(20,10,60,.5)}
.sheet-wrap.open .back{opacity:1}.sheet-wrap.open .sheet{transform:none}
.grab{width:44px;height:5px;border-radius:99px;background:var(--line);margin:2px auto 12px}
.sheet h2{font-family:var(--serif);font-style:italic;font-size:26px;font-weight:500;text-align:center}
.hintline{text-align:center;font-size:14px;color:var(--mute);margin:2px 0 12px}
.seg{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:4px;padding:4px;border-radius:99px;background:var(--soft);margin:0 0 10px}
.seg button{padding:11px 8px;border-radius:99px;font-size:14px;font-weight:600;color:var(--mute);min-height:44px}
.seg button[aria-pressed=true]{background:var(--acc);color:var(--acc-ink)}
.panel{margin-bottom:6px}.panel[hidden]{display:none}
.timer{text-align:center;font-size:48px;font-weight:300;letter-spacing:-.02em;font-feature-settings:"tnum";margin:6px 0}
.big-btn{display:block;width:100%;padding:16px;border-radius:24px;background:var(--soft);font-weight:700;font-size:16px;min-height:52px}
.big-btn.running{background:var(--blush)}
.stepper{display:flex;align-items:center;justify-content:center;gap:18px;margin:6px 0 4px}
.stepper button{width:56px;height:56px;border-radius:50%;background:var(--soft);font-size:28px;font-weight:600;line-height:1}
.stepper div{min-width:130px;text-align:center;font-size:18px;color:var(--mute)}.stepper b{font-size:44px;font-weight:300;color:var(--ink);font-feature-settings:"tnum";letter-spacing:-.02em}
.opts{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:6px}
.opts button{padding:16px 8px;border-radius:22px;background:var(--soft);font-weight:700;font-size:15px;min-height:54px}
.opts button[aria-pressed=true]{background:var(--acc);color:var(--acc-ink)}
.sheet-acts{display:grid;grid-template-columns:1fr 1.6fr;gap:10px;margin-top:12px}
.sheet-acts button{padding:16px;border-radius:24px;font-weight:700;font-size:15px;min-height:52px}
.ghost{background:var(--soft);color:var(--ink)}.primary{background:linear-gradient(160deg,var(--acc2),var(--acc));color:var(--acc-ink);box-shadow:0 12px 26px -12px var(--acc)}

/* ---------- Подсказка «Сохранено · Отменить» ---------- */
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(86px + env(safe-area-inset-bottom));z-index:70;display:flex;align-items:center;gap:14px;padding:10px 12px 10px 18px;border-radius:99px;background:#241F3F;color:#F1ECFF;font-size:14px;font-weight:600;box-shadow:0 14px 30px -10px rgba(0,0,0,.5);max-width:92vw}
.toast[hidden]{display:none}
.toast button{padding:8px 14px;border-radius:99px;background:rgba(255,255,255,.14);color:#FFC36B;font-weight:700;font-size:13px}

/* ---------- Лента записей и выбор языка ---------- */
.logs ul{list-style:none;padding:0;display:grid;gap:0}
.logs li{display:flex;align-items:center;gap:12px;padding:11px 0;border-top:1px solid var(--line);font-size:14px}
.logs li:first-child{border-top:0}
.logs .ic{width:32px;height:32px;border-radius:50%;display:grid;place-content:center;background:var(--soft);flex:none}
.logs .ic svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.logs .t{margin-left:auto;color:var(--mute);font-feature-settings:"tnum"}
.logs .empty{color:var(--mute);justify-content:center}
.langs{display:flex;gap:6px;justify-content:center;align-items:center;margin:20px 0 6px;font-size:12px;color:var(--mute)}
.langs button{padding:6px 12px;border-radius:99px;border:1px solid var(--line);font-size:12px;font-weight:600;color:var(--mute)}
.langs button[aria-pressed=true]{background:var(--acc);color:var(--acc-ink);border-color:var(--acc)}

/* ---------- Сцена без фона: малыш лежит прямо на небе (зелёный вырезается в keyer.js) ---------- */
.cutout{position:relative;aspect-ratio:852/532;margin:2px -6px 4px}
.cutout::before{content:"";position:absolute;left:8%;right:8%;top:16%;bottom:2%;border-radius:50%;background:radial-gradient(closest-side,var(--acc) 0,transparent 78%);opacity:.22;filter:blur(18px)}
.cutout .poster,.cutout canvas{position:absolute;inset:0;width:100%;height:100%;display:block;transition:filter 1s,opacity .6s}
.cutout canvas{opacity:0}.cutout.live canvas{opacity:1}.cutout.live .poster{opacity:0}
.cutout .vsrc{position:absolute;width:2px;height:2px;opacity:0;pointer-events:none}
body[data-sky=night] .cutout .poster,body[data-sky=night] .cutout canvas{filter:brightness(.82) saturate(.92)}
.zp{position:absolute;font-family:var(--serif);font-style:italic;font-weight:600;color:#fff;text-shadow:0 2px 12px rgba(80,60,140,.55);opacity:0;pointer-events:none}
.zp.z1{left:34%;top:14%;font-size:34px}.zp.z2{left:41%;top:5%;font-size:24px}.zp.z3{left:46%;top:-3%;font-size:17px}
@media (prefers-reduced-motion:no-preference){
  .zp{animation:zrise 4.2s ease-in-out infinite}.zp.z2{animation-delay:1.3s}.zp.z3{animation-delay:2.6s}
}
@keyframes zrise{0%{opacity:0;transform:translateY(10px)}30%{opacity:.95}100%{opacity:0;transform:translateY(-22px)}}

/* сцена подгузника: вертикальный ролик по центру листа */
.scenebox.dia{display:grid;place-items:center;padding:10px 0}
.cutout.cut-dia{aspect-ratio:504/656;height:270px;margin:0}
.cutout.cut-dia::before{display:none}
#nursing-box[hidden],#bottle-box[hidden]{display:none}

/* сцена пробуждения: коротко после «Конец сна» */
.cutout.cut-wake{aspect-ratio:620/692;width:min(62vw,236px);margin:2px auto 8px}
.cutout.cut-wake::before{display:none}
.cutout.cut-wake[hidden]{display:none}
.cutout.cut-wake canvas,.cutout.cut-wake .poster{border-radius:22px}

/* ряд «Ещё»: купание и другие занятия */
.more{display:flex;gap:8px;flex-wrap:wrap;margin:-4px 0 12px}
.more button{display:flex;align-items:center;gap:8px;padding:10px 16px;border-radius:99px;background:var(--btn);border:1px solid var(--line);font-size:13px;font-weight:600;min-height:44px;backdrop-filter:blur(12px)}
.more svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}

/* настоящее солнце (ролик без фона) вместо нарисованного, когда день и малыш бодрствует */
.orb{position:absolute;left:-27%;top:-27%;width:154%;aspect-ratio:1;opacity:0;transition:opacity .9s;pointer-events:none}
.orb::before{content:"";position:absolute;inset:14%;border-radius:50%;background:radial-gradient(closest-side,var(--acc2) 0,transparent 75%);opacity:.5;filter:blur(14px)}
.orb .poster,.orb canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.orb canvas{opacity:0;transition:opacity .5s}.orb.live canvas{opacity:1}.orb.live .poster{opacity:0}
.orb .vsrc{position:absolute;width:2px;height:2px;opacity:0;pointer-events:none}
body[data-sky=day][data-state=awake] #orb-sun{opacity:1}
body[data-sky=day][data-state=awake] .sky .sun{opacity:0}

/* настоящий месяц: ночью, пока малыш бодрствует */
.orb.orb-moon::before{background:radial-gradient(closest-side,var(--acc) 0,transparent 72%);opacity:.32}
body[data-sky=night][data-state=awake] #orb-moon{opacity:1}
body[data-sky=night][data-state=awake] .sky .moon{opacity:0}

/* спящие солнце и месяц: глаза закрыты, медленное «дыхание» */
.orb-asleep::before{opacity:.28}
body[data-sky=day][data-state=asleep] #orb-sunz,body[data-sky=night][data-state=asleep] #orb-moonz{opacity:1}
body[data-sky=day][data-state=asleep] .sky .sun,body[data-sky=night][data-state=asleep] .sky .moon{opacity:0}
@media (prefers-reduced-motion:no-preference){.orb-asleep{animation:orbbreath 6s ease-in-out infinite}}
@keyframes orbbreath{50%{transform:scale(1.035)}}

/* ---------- Шапка: шестерёнка ---------- */
.head .gear{width:46px;height:46px;border-radius:50%;background:var(--card);border:1px solid var(--line);display:grid;place-content:center;backdrop-filter:blur(10px);color:var(--ink)}
.head .gear svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.hintcard{text-align:center;color:var(--mute);font-size:14px;line-height:1.5}
.hintcard[hidden]{display:none}
.guidep{font-weight:600;color:var(--ink)}
body[data-motion=off] *,body[data-motion=off] *::before,body[data-motion=off] *::after{animation:none!important;transition:none!important}

/* ---------- Настройки ---------- */
[data-screen=settings]{padding-bottom:20px}
.s-head{display:flex;align-items:center;gap:12px;margin:-2px 0 6px}
.s-head h1{font-family:var(--serif);font-style:italic;font-size:30px;font-weight:500}
.s-back{width:46px;height:46px;border-radius:50%;background:var(--card);border:1px solid var(--line);display:grid;place-content:center;color:var(--ink);backdrop-filter:blur(10px)}
.s-back svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.s-group{margin-top:22px}
.s-group h2{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--mute);margin:0 10px 8px}
.s-card{background:var(--card);border:1px solid var(--line);border-radius:26px;padding:4px 18px;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:0 18px 40px -30px rgba(30,20,80,.55)}
.s-row{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:14px 0;border-top:1px solid var(--line)}
.s-card>.s-row:first-child,.s-card>.s-btn:first-child,.s-card>.s-plan:first-child{border-top:0}
.s-lab{display:grid;gap:3px;min-width:0}
.s-lab span{font-size:15px;font-weight:600}
.s-lab small{font-size:12px;color:var(--mute);line-height:1.4}
.s-ctl{flex:none;max-width:64%}
.s-val{font-feature-settings:"tnum";font-weight:600}
.s-in{font:inherit;color:var(--ink);background:var(--soft);border:1px solid transparent;border-radius:14px;padding:10px 12px;min-height:44px;width:100%;min-width:140px;text-align:right}
.s-in:focus{outline:2px solid var(--acc);outline-offset:1px}
.s-in::placeholder{color:var(--mute);opacity:.7}
.s-time{min-width:112px}
.s-seg{display:flex;gap:2px;padding:3px;border-radius:99px;background:var(--soft);flex-wrap:wrap;justify-content:flex-end}
.s-seg button{padding:8px 12px;border-radius:99px;font-size:13px;font-weight:600;color:var(--mute);min-height:40px}
.s-seg button[aria-pressed=true]{background:var(--acc);color:var(--acc-ink)}
.s-sw{width:54px;height:34px;border-radius:99px;background:var(--track);position:relative;transition:background .25s;flex:none}
.s-sw i{position:absolute;left:3px;top:3px;width:28px;height:28px;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.25);transition:transform .25s}
.s-sw[aria-checked=true]{background:var(--acc)}
.s-sw[aria-checked=true] i{transform:translateX(20px)}
.s-sw[disabled]{opacity:.4}
.s-step{display:flex;align-items:center;gap:8px}
.s-step button{width:40px;height:40px;border-radius:50%;background:var(--soft);font-size:20px;font-weight:600}
.s-step b{min-width:88px;text-align:center;font-feature-settings:"tnum";font-weight:600}
.s-note{font-size:13px;color:var(--mute);line-height:1.55;padding:13px 0;border-top:1px solid var(--line)}
.s-card>.s-note:first-child{border-top:0}
.s-btn{display:block;width:100%;text-align:left;padding:15px 0;font-size:15px;font-weight:600;border-top:1px solid var(--line);min-height:52px}
.s-btn.danger{color:#E0576A}
.s-state{font-size:12px;font-weight:700}
.s-nsOn{color:#3FA27A}.s-nsBlocked,.s-nsNo,.s-nsIos{color:#D17A3A}
.s-help{border-top:1px solid var(--line);padding:14px 0}
.s-help h3{font-size:14px;font-weight:700}
.s-help p{font-size:13px;line-height:1.55;color:var(--mute);margin-top:7px}
.s-plan{padding:15px 0;border-top:1px solid var(--line);display:grid;gap:4px}
.s-plan b{font-size:15px}
.s-plan span{font-size:13px;color:var(--mute);line-height:1.5}
.s-plan.on b::before{content:"✓ ";color:#3FA27A}
.s-plan.soon{opacity:.72}

/* ---------- Первый вход ---------- */
.onboard{position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:16px;background:rgba(10,8,30,.58);backdrop-filter:blur(10px)}
.onboard[hidden]{display:none}
.ob-card{width:min(100%,420px);background:var(--sheet);color:var(--ink);border-radius:34px;padding:20px 22px 22px;box-shadow:0 30px 80px -20px rgba(20,10,60,.6);max-height:96dvh;overflow:auto}
.ob-langs{display:flex;gap:6px;justify-content:center}
.ob-langs button{padding:7px 13px;border-radius:99px;border:1px solid var(--line);font-size:12px;font-weight:700;color:var(--mute);min-height:36px}
.ob-langs button[aria-pressed=true]{background:var(--acc);color:var(--acc-ink);border-color:var(--acc)}
.ob-orb{display:block;width:132px;height:132px;margin:10px auto 0;object-fit:contain}
.ob-card h1{font-family:var(--serif);font-style:italic;font-weight:500;font-size:32px;text-align:center}
.ob-sub{text-align:center;color:var(--mute);font-size:14px;line-height:1.5;margin:6px 0 18px}
.ob-f{display:grid;gap:6px;margin-bottom:14px}
.ob-f>span{font-size:13px;font-weight:700}
.ob-f input{font:inherit;color:var(--ink);background:var(--soft);border:1px solid transparent;border-radius:16px;padding:14px;min-height:52px;width:100%}
.ob-f input:focus{outline:2px solid var(--acc);outline-offset:1px}
.ob-f small{font-size:12px;color:var(--mute)}
.ob-err{color:#E0576A;font-size:13px;font-weight:600;margin:0 0 10px}
.ob-err[hidden]{display:none}
.ob-go{display:block;width:100%;padding:16px;border-radius:24px;font-weight:700;font-size:16px;min-height:54px}
.cf-text{font-size:16px;line-height:1.5;text-align:center;margin:6px 8px 10px}
.sheet-acts .danger{background:#E0576A;color:#fff;box-shadow:0 12px 26px -12px #E0576A}
body.ob-open{overflow:hidden}
#shift-invite{display:grid;gap:12px;text-align:center}
#shift-invite p{font-size:14px;line-height:1.5;color:var(--mute)}

.s-row.stack{flex-direction:column;align-items:stretch;gap:10px}
.s-row.stack .s-ctl{max-width:none;width:100%}
.s-row.stack .s-seg{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;flex-wrap:nowrap}
.s-row.stack .s-seg button{padding:10px 6px;text-align:center}

/* напоминание «Включите уведомления» */
.notice{display:grid;grid-template-columns:auto 1fr;gap:12px 14px;align-items:start}
.notice[hidden]{display:none}
.nb-ic{width:44px;height:44px;border-radius:50%;background:var(--soft);display:grid;place-content:center;color:var(--acc)}
.nb-ic svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.nb-tx b{font-size:15px}
.nb-tx p{font-size:13px;line-height:1.5;color:var(--mute);margin-top:3px}
.nb-acts{grid-column:1/-1;display:grid;grid-template-columns:1.4fr 1fr;gap:8px}
.nb-acts button{padding:13px;border-radius:20px;font-weight:700;font-size:14px;min-height:46px}

/* инструкция по включению уведомлений */
.steps{list-style:none;counter-reset:st;display:grid;gap:10px;margin:6px 0 14px;padding:0}
.steps li{counter-increment:st;display:grid;grid-template-columns:32px 1fr;gap:12px;align-items:start;font-size:15px;line-height:1.5}
.steps li::before{content:counter(st);width:32px;height:32px;border-radius:50%;background:var(--acc);color:var(--acc-ink);font-weight:800;display:grid;place-content:center;font-size:14px}
.help-res{text-align:center;font-weight:700;font-size:14px;margin:0 0 12px}
.help-res.ok{color:#3FA27A}.help-res.no{color:#D17A3A}
.help-res[hidden]{display:none}
html[data-sky0=day]{background:#FFEBD9}html[data-sky0=night]{background:#0B0D1C}
html:not(.ready) body{opacity:0}html.ready body{transition:color .8s,opacity .35s}
body[data-active=settings] .tabbar{display:none}
#shift-invite .primary{padding:14px 22px;border-radius:99px;font-weight:700;font-size:15px;min-height:48px;justify-self:center}