/* iPhone 14 app shell: 390 x 844, fixed blue star-sky environment. */
:root{
  --app-width:390px;
  --app-height:844px;
  --dream-blue:#6793ca;
  --dream-ink:rgba(20,48,78,.82);
}
html,body{width:100%;height:100%;overscroll-behavior:none}
body{
  display:grid;
  place-items:center;
  min-height:100dvh;
  overflow:hidden;
  background:#edf1f5;
}
.depth-scene{
  left:50%!important;
  right:auto!important;
  top:50%!important;
  bottom:auto!important;
  width:min(100vw,var(--app-width))!important;
  height:min(100dvh,var(--app-height))!important;
  transform:translate(-50%,-50%)!important;
  overflow:hidden;
  background:#6793ca url("assets/fixed-sky-bg.png") center/cover no-repeat!important;
  filter:saturate(.86) brightness(1.01) contrast(.96);
  isolation:isolate;
}
.depth-scene::before{content:none!important}
.photo-depth,.photo-mid,.photo-front,.paint-wash,.anime-paint-sky,
.far-planet,.cosmic-arc,.vanishing-light,.mountain,.cloud-ocean,
.distant-birds,.milky-way{display:none!important}
.dream-haze{
  position:absolute;
  z-index:1;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(118deg,transparent 8%,rgba(255,255,255,.055) 42%,transparent 67%),
    radial-gradient(ellipse at 50% 45%,rgba(255,255,255,.065),transparent 57%);
  animation:dreamHazeBreathe 18s ease-in-out infinite alternate;
}
.dream-stars{position:absolute;z-index:2;inset:0;pointer-events:none}
.dream-stars i{
  position:absolute;
  left:var(--x);top:var(--y);
  width:var(--s);height:var(--s);
  border-radius:50%;
  opacity:var(--o);
  background:rgba(var(--c),.98);
  box-shadow:0 0 1px rgba(var(--c),.92),0 0 4px rgba(var(--c),.42);
  animation:starBreath var(--t) ease-in-out var(--d) infinite;
  will-change:opacity,filter;
}
.dream-stars-far{animation:starLayerDrift 30s ease-in-out infinite alternate}
.dream-stars-near{animation:starLayerDrift 17s ease-in-out -7s infinite alternate-reverse}
.dream-stars-near i.halo{
  box-shadow:
    0 0 2px rgba(var(--c),1),
    0 0 7px rgba(var(--c),.72),
    0 0 14px rgba(213,231,255,.34);
}
.dream-stars-near i.large-star{
  box-shadow:
    0 0 2px rgba(var(--c),1),
    0 0 8px rgba(var(--c),.78),
    0 0 18px rgba(205,226,255,.34);
}
.dream-stars-near i.glint::before,.dream-stars-near i.glint::after{
  content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  border-radius:999px;background:rgba(255,255,255,.64);
}
.dream-stars-near i.glint::before{width:.7px;height:7px}
.dream-stars-near i.glint::after{width:7px;height:.7px}
.dream-stars-near i.header-star{
  z-index:2;
  box-shadow:0 0 2px rgba(var(--c),1),0 0 7px rgba(var(--c),.72);
  animation-name:headerStarBreath;
}
.dream-stars-near i.header-focus{
  box-shadow:0 0 2px rgba(var(--c),1),0 0 9px rgba(var(--c),.88),0 0 18px rgba(211,231,255,.5);
}
.dream-stars .dream-meteor{
  position:absolute;
  left:var(--mx);top:var(--my);
  width:var(--mw);height:1px;
  border-radius:999px;
  transform-origin:right center;
  background:linear-gradient(90deg,transparent,rgba(224,237,255,.16) 24%,rgba(244,249,255,.86) 88%,#fff);
  filter:drop-shadow(0 0 3px rgba(218,235,255,.5));
  opacity:0;
  animation:meteorBreathe var(--mt) ease-in-out var(--md) infinite;
  will-change:opacity,filter,transform;
}
.dream-stars .dream-meteor::after{
  content:"";position:absolute;right:-1px;top:50%;width:2.4px;height:2.4px;
  border-radius:50%;transform:translateY(-50%);background:#fff;
  box-shadow:0 0 4px rgba(255,255,255,.95),0 0 10px rgba(216,235,255,.7);
}
.app{
  width:min(100vw,var(--app-width))!important;
  max-width:var(--app-width)!important;
  height:min(100dvh,var(--app-height))!important;
  min-height:0!important;
  padding:
    calc(12px + env(safe-area-inset-top))
    18px
    max(4px, env(safe-area-inset-bottom))!important;
  gap:10px!important;
  grid-template-rows:auto minmax(0,1fr) auto!important;
  overflow:hidden;
}
header{
  display:flex!important;align-items:flex-start!important;justify-content:space-between!important;
  isolation:auto!important;padding:3px 3px 7px!important;min-height:72px;
  background:transparent!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;box-shadow:none!important;
}
header::before,header::after{content:none!important;display:none!important;background:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
header>.brand-lockup{display:grid;align-content:start;gap:2px;min-width:0}
h1{
  display:flex;align-items:flex-start;margin:0!important;font-size:38px!important;line-height:1!important;letter-spacing:-.09em!important;
  color:rgba(10,45,75,.9)!important;text-shadow:0 1px 5px rgba(255,255,255,.22)!important;
}
h1 span{display:block}.title-fu{transform:translateY(-2px)}.title-ri{transform:translateY(7px)}
header small{
  margin:5px 0 0;font-size:10px!important;line-height:1.4!important;letter-spacing:.07em!important;
  color:rgba(18,58,88,.63)!important;text-shadow:0 1px 4px rgba(255,255,255,.2)!important;white-space:nowrap;
}
.music-button{
  position:relative;flex:0 0 46px;width:46px;height:46px;margin:5px 1px 0;border:1px solid rgba(255,255,255,.6);border-radius:50%;
  background:radial-gradient(circle at 29% 20%,rgba(255,255,255,.72),rgba(255,255,255,.22) 34%,rgba(208,232,248,.13));
  -webkit-backdrop-filter:blur(13px) saturate(.7);backdrop-filter:blur(13px) saturate(.7);
  box-shadow:inset 0 1px 5px rgba(255,255,255,.78),inset 0 -5px 10px rgba(82,111,139,.06),0 9px 22px rgba(57,77,101,.1);
  color:rgba(15,60,93,.72);cursor:pointer;
}
.music-button span{position:relative;z-index:1;font:500 20px/1 Georgia,serif}
.music-button i{position:absolute;right:6px;bottom:6px;width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.78);box-shadow:0 0 7px rgba(255,255,255,.85);opacity:.35}
.music-button.playing{animation:musicFloat 3.6s ease-in-out infinite}.music-button.playing i{opacity:1;animation:musicPulse 1.7s ease-in-out infinite}.music-button:active{transform:scale(.91)}
.round{width:44px!important;height:44px!important}
.habit-nav{
  height:64px!important;
  min-height:64px!important;
  padding:7px 10px!important;
  gap:8px!important;
  border-color:rgba(255,255,255,.68)!important;
  background:linear-gradient(180deg,rgba(255,255,255,.42),rgba(247,250,253,.2))!important;
  -webkit-backdrop-filter:blur(18px) saturate(.72) brightness(1.04)!important;
  backdrop-filter:blur(18px) saturate(.72) brightness(1.04)!important;
  box-shadow:inset 0 1px 4px rgba(255,255,255,.88),0 14px 34px rgba(72,83,98,.12)!important;
}
#habits{gap:7px!important;padding:1px 3px!important}
.pill{height:38px!important;padding-inline:15px!important;font-size:13px!important}
.plus{width:42px!important;height:42px!important;margin-left:2px!important}
#sky{
  min-height:0!important;
  padding:22px 10px 12px!important;
  border-radius:36px!important;
  border-color:rgba(255,255,255,.62)!important;
  background:linear-gradient(180deg,rgba(255,255,255,.31),rgba(248,250,253,.13))!important;
  -webkit-backdrop-filter:blur(16px) saturate(.7) brightness(1.04)!important;
  backdrop-filter:blur(16px) saturate(.7) brightness(1.04)!important;
  box-shadow:inset 0 1px 7px rgba(255,255,255,.76),inset 0 -8px 22px rgba(102,112,128,.05),0 18px 46px rgba(72,83,98,.11)!important;
}
.page-head{height:92px!important}
.page-head span{font-size:25px!important}
.page-head strong{margin:5px 0!important;font-size:11px!important}
.page-head i{margin-top:3px!important;font-size:10px!important}
.calendar{height:calc(100% - 94px)!important;min-height:0!important}
.day-number{width:40px!important;height:40px!important;font-size:15px!important}
.day-cell.done .day-number{font-size:20px!important}
.floating-bubbles{inset:88px 5px 6px!important}
footer{font-size:11px!important;line-height:1.45!important;min-height:24px}
dialog{width:min(calc(100% - 28px),354px)!important;max-height:calc(100dvh - 48px)}
dialog form,#noteModal form{padding:28px 24px!important}
form h2{font-size:30px!important}
#noteModal textarea{min-height:142px!important}
.ai-memory-modal{overflow-x:hidden!important}
.ai-memory-modal form{width:100%!important;max-width:100%!important;overflow-x:hidden!important;box-sizing:border-box!important}

/* Native app navigation and view stack. */
.page-stack{position:relative;min-width:0;min-height:0;overflow:hidden}
.app-view{width:100%;height:100%;min-height:0;animation:viewReveal .32s cubic-bezier(.22,.75,.25,1)}
.app-view[hidden]{display:none!important}
.today-view{display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:10px}
.today-footer{
  isolation:auto!important;
  background:transparent!important;
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important;
  box-shadow:none!important;
  color:rgba(17,58,88,.68)!important;
  text-shadow:0 1px 5px rgba(255,255,255,.28)!important;
  font-size:11px!important;line-height:1.45!important;min-height:24px;
}
.today-footer::before,.today-footer::after{content:none!important;display:none!important;background:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
.today-footer button{background:transparent!important;box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;color:rgba(17,58,88,.72)!important}
.tab-bar{
  position:relative;z-index:24;
  display:grid;grid-template-columns:repeat(4,1fr);align-items:center;gap:7px;
  min-height:60px;margin:1px 4px 0;padding:0;
  border:0;border-radius:0;background:transparent;
  -webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none;
}
.tab-bar button{
  position:relative;display:grid;place-items:center;align-content:center;gap:4px;min-width:0;height:60px;
  border:0;border-radius:24px;background:transparent;
  -webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none;
  color:rgba(27,68,101,.46);cursor:pointer;
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Helvetica Neue",sans-serif;
  transition:color .24s ease,transform .24s ease,filter .24s ease;
}
.tab-bar button::before{
  content:"";position:absolute;left:50%;top:47%;width:58px;height:58px;border-radius:50%;
  border:1px solid rgba(255,255,255,.42);
  background:radial-gradient(circle,rgba(255,255,255,.28),rgba(226,242,253,.1) 48%,transparent 72%);
  box-shadow:inset 0 0 12px rgba(255,255,255,.36),0 0 20px rgba(224,242,255,.08);
  opacity:0;transform:translate(-50%,-50%) scale(.45);pointer-events:none;
}
.tab-bar button:active{transform:translateY(2px) scale(.9);filter:brightness(1.1)}
.tab-bar button.tap-pop{animation:tabPop .42s cubic-bezier(.2,.8,.2,1)}
.tab-bar button.tap-pop::before{animation:tabRipple .5s ease-out}
.tab-bar button:focus{outline:none}
.tab-bar button:focus-visible{filter:drop-shadow(0 0 7px rgba(255,255,255,.65))}
.tab-bar button.active{
  color:rgba(16,61,96,.9);
  background:transparent;box-shadow:none;
  filter:drop-shadow(0 3px 8px rgba(222,241,255,.25));
}
.tab-bar button.active::after{
  content:"";position:absolute;bottom:4px;width:4px;height:4px;border-radius:50%;
  background:rgba(232,248,255,.95);box-shadow:0 0 8px rgba(255,255,255,.9);
}
.tab-icon{position:relative;z-index:1;font:500 27px/1 -apple-system,BlinkMacSystemFont,"SF Pro Display",sans-serif;transition:transform .24s ease,text-shadow .24s ease}
.bubble-icon{font-size:31px;text-shadow:9px -5px 0 rgba(24,74,108,.24)}
.tab-bar button.active .tab-icon{transform:translateY(-1px) scale(1.08);text-shadow:0 0 12px rgba(230,246,255,.48)}
.tab-bar small{position:relative;z-index:1;font-size:11px;line-height:1;letter-spacing:.04em}

.archive-view,.companion-view,.profile-view{
  overflow:hidden;padding:18px 16px 14px;border:1px solid rgba(255,255,255,.6);border-radius:34px;
  background:linear-gradient(180deg,rgba(255,255,255,.31),rgba(247,250,253,.13));
  -webkit-backdrop-filter:blur(16px) saturate(.72);backdrop-filter:blur(16px) saturate(.72);
  box-shadow:inset 0 1px 7px rgba(255,255,255,.76),0 18px 44px rgba(67,80,98,.1);
}
.profile-view{
  overflow-x:hidden!important;overflow-y:auto!important;
  padding-bottom:30px!important;
  overscroll-behavior-y:contain;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  touch-action:pan-y;
}
.profile-view::-webkit-scrollbar{display:none}
.profile-view .settings-list{margin-bottom:8px}
.record-view{
  display:grid;grid-template-rows:auto auto minmax(0,1fr);gap:11px;overflow:hidden;padding:4px 2px 1px;
}
.record-topbar{display:grid;grid-template-columns:42px minmax(0,1fr) auto;align-items:center;gap:10px;padding:2px 2px 0}
.record-back{position:relative;display:grid;place-items:center;width:40px;height:40px;padding:0;border:1px solid rgba(255,255,255,.58);border-radius:50%;background:radial-gradient(circle at 30% 20%,rgba(255,255,255,.7),rgba(255,255,255,.18) 45%,rgba(211,232,247,.12));color:transparent;font-size:0;line-height:0;box-shadow:inset 0 1px 4px rgba(255,255,255,.75),0 6px 15px rgba(61,80,104,.08)}
.record-back::before,.record-back::after{
  content:"";position:absolute;left:calc(50% - 3px);top:50%;
  width:9px;height:2px;border:0;border-radius:999px;
  background:rgba(15,58,90,.73);transform-origin:left center;
}
.record-back::before{transform:translateY(-50%) rotate(-45deg)}
.record-back::after{transform:translateY(-50%) rotate(45deg)}
.record-topbar small{display:block;color:rgba(23,66,97,.46);font-size:9px;line-height:1.45;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.record-topbar h2{margin:1px 0 0;color:rgba(15,55,86,.88);font:400 24px/1.2 var(--font-editorial)}
.record-topbar>span{color:rgba(23,66,97,.42);font-size:10px}
.record-picker{display:flex;gap:8px;min-width:0;padding:3px 2px 8px;overflow-x:auto;scrollbar-width:none;scroll-snap-type:x proximity}
.record-picker::-webkit-scrollbar{display:none}
.record-picker button{flex:0 0 67px;height:50px;display:grid;place-items:center;align-content:center;gap:2px;padding:0;border:1px solid rgba(255,255,255,.46);border-radius:18px;background:rgba(255,255,255,.13);color:rgba(21,63,94,.47);scroll-snap-align:center;box-shadow:inset 0 1px 3px rgba(255,255,255,.46)}
.record-picker button strong{font-size:12px;font-weight:500}.record-picker button small{min-height:9px;font-size:7px;opacity:.6}
.record-picker button.active{border-color:var(--bubble-border);background:linear-gradient(155deg,rgba(255,255,255,.48),color-mix(in srgb,var(--bubble-light) 31%,rgba(255,255,255,.15)));color:color-mix(in srgb,var(--bubble-dark) 76%,#173e58);box-shadow:inset 0 1px 5px rgba(255,255,255,.82),0 7px 18px var(--bubble-glow)}
.record-page-form{
  min-height:0!important;display:grid!important;grid-template-rows:auto auto minmax(0,1fr) auto auto;gap:11px!important;margin:0!important;padding:15px 15px 12px!important;overflow:hidden;
  border:1px solid rgba(255,255,255,.64);border-radius:31px;background:linear-gradient(180deg,rgba(255,255,255,.35),rgba(247,250,253,.15));
  -webkit-backdrop-filter:blur(17px) saturate(.75);backdrop-filter:blur(17px) saturate(.75);box-shadow:inset 0 1px 7px rgba(255,255,255,.78),0 16px 38px rgba(66,81,101,.1);
}
.record-editor-head{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:10px}.record-date-line{display:grid;gap:2px;color:rgba(19,61,92,.66)}
.record-date-line time{font-size:11px;font-weight:500;letter-spacing:.04em}.record-date-line span{font-size:8px;opacity:.58}
.record-save-button{width:auto!important;min-width:112px;height:38px!important;margin:0!important;padding:0 15px!important;border-radius:999px!important;font-size:11px!important;white-space:nowrap}
.record-page-form>label{margin:0!important;color:rgba(17,58,89,.82)!important;font:400 20px/1.35 var(--font-editorial)!important;letter-spacing:.01em!important}
.record-page-editor{
  width:100%;height:100%;min-height:0;margin:0!important;padding:0!important;overflow:hidden;box-sizing:border-box;
  border:1px solid rgba(255,255,255,.5)!important;border-radius:22px!important;outline:none;background:linear-gradient(155deg,color-mix(in srgb,var(--bubble-light) 19%,rgba(255,255,255,.2)),rgba(255,255,255,.1))!important;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:inset 0 1px 4px rgba(255,255,255,.56)!important;color:rgba(15,57,87,.82)!important;font:400 14px/1.85 var(--font-interface)!important;
}
.record-page-editor .ql-container{height:100%;border:0!important;font:inherit}.record-page-editor .ql-editor{height:100%;padding:15px 13px;overflow:auto;white-space:pre-wrap;word-break:break-word;color:inherit;font:inherit}.record-page-editor .ql-editor.ql-blank::before{left:13px;right:13px;color:rgba(27,68,97,.35);font-style:normal}.record-page-editor .ql-editor img{display:block;max-width:100%;height:auto;margin:12px auto;border-radius:15px;box-shadow:0 7px 20px rgba(42,69,94,.12)}
.record-toolbar{display:grid;grid-template-columns:38px 38px 38px 52px minmax(0,1fr);align-items:center;gap:7px;padding:0 2px;background:transparent;border:0;box-shadow:none}
.record-toolbar button,.record-image-button{height:34px;display:flex;align-items:center;justify-content:center;border:0;border-radius:12px;background:transparent;color:rgba(16,59,90,.62);font-size:14px;cursor:pointer}.record-toolbar button.active{background:rgba(255,255,255,.37);color:rgba(12,53,84,.9);box-shadow:inset 0 1px 3px rgba(255,255,255,.75)}
.record-toolbar button:focus{outline:none}.record-toolbar button:focus-visible{outline:1px solid rgba(255,255,255,.7);outline-offset:1px}
.record-image-button{gap:3px;font-size:17px}.record-image-button small{font-size:8px}.record-save-state{min-height:12px;color:rgba(20,71,91,.52);font-size:8px;text-align:center}
.record-view input[type="file"]{display:none!important;position:absolute!important;width:0!important;height:0!important;opacity:0!important;pointer-events:none!important}
body.record-page-open .app>header,body.record-page-open .tab-bar{display:none!important}
body.record-page-open .app{grid-template-rows:minmax(0,1fr)!important;padding-top:calc(14px + env(safe-area-inset-top))!important;padding-bottom:calc(15px + env(safe-area-inset-bottom))!important}
body.habit-detail-page-open .app>header{display:none!important}
body.habit-detail-page-open .app{grid-template-rows:minmax(0,1fr) auto!important;padding-top:calc(14px + env(safe-area-inset-top))!important}
@supports(height:100dvh){body.record-page-open .record-view{height:100%;max-height:calc(100dvh - 29px - env(safe-area-inset-top) - env(safe-area-inset-bottom))}}
.view-heading small{display:block;color:rgba(23,67,98,.5);font-size:10px;letter-spacing:.12em}
.view-heading h2{margin:3px 0 14px;color:rgba(17,57,89,.88);font:400 31px/1.2 "Songti SC","Noto Serif SC",serif}
.archive-switch{display:grid;grid-template-columns:1fr 1fr;padding:3px;border-radius:18px;background:rgba(255,255,255,.18);box-shadow:inset 0 1px 3px rgba(255,255,255,.52)}
.archive-switch button{height:34px;border:0;border-radius:15px;background:transparent;color:rgba(25,68,99,.48);font-size:12px}
.archive-switch button:focus{outline:none}
.archive-switch button:focus-visible{box-shadow:inset 0 0 0 1px rgba(255,255,255,.7),0 0 0 2px rgba(43,91,126,.14)}
.archive-switch button.active{color:rgba(15,58,90,.86);background:rgba(255,255,255,.42);box-shadow:0 5px 14px rgba(58,79,104,.09),inset 0 1px rgba(255,255,255,.7)}
.bubble-archive{height:calc(100% - 56px);padding:4px 2px 2px;overflow:auto;scrollbar-width:none}
.bubble-archive::-webkit-scrollbar{display:none}
.archive-empty{height:100%;display:grid;place-content:center;text-align:center;color:rgba(27,67,96,.46);font-size:13px;line-height:1.8}
.habit-group,.timeline-item{
  position:relative;margin-bottom:10px;padding:14px;border:1px solid rgba(255,255,255,.48);border-radius:22px;
  background:rgba(255,255,255,.18);box-shadow:inset 0 1px 3px rgba(255,255,255,.54),0 8px 20px rgba(67,81,99,.07);
}
.habit-group-head{display:flex;align-items:center;justify-content:space-between;color:rgba(18,61,93,.82)}
.habit-group-head span{display:flex;align-items:center;gap:8px;font-size:14px}
.habit-group-head i{width:8px;height:8px;border-radius:50%;background:var(--c);box-shadow:0 0 9px var(--c)}
.habit-group-head small{font-size:10px;color:rgba(26,68,98,.45)}
.mini-bubbles{display:flex;flex-wrap:wrap;gap:7px;margin-top:11px}
.mini-bubble{width:29px;height:29px;border:1px solid rgba(255,255,255,.72);border-radius:50%;background:radial-gradient(circle at 30% 20%,rgba(255,255,255,.86),rgba(255,255,255,.24) 38%,color-mix(in srgb,var(--c) 22%,transparent));color:rgba(20,64,96,.64);font-size:9px;box-shadow:inset 0 0 9px rgba(255,255,255,.7),0 5px 11px rgba(67,83,102,.08)}
.memory-bubble{position:relative;width:38px;height:38px;font-size:10px;box-shadow:inset 0 0 12px rgba(255,255,255,.76),0 7px 16px rgba(67,83,102,.1),0 0 10px color-mix(in srgb,var(--c) 14%,transparent)}
.memory-bubble::after{content:"";position:absolute;right:5px;bottom:5px;width:3px;height:3px;border-radius:50%;background:rgba(255,255,255,.94);box-shadow:0 0 5px rgba(255,255,255,.9)}
.timeline-item{display:grid;grid-template-columns:42px minmax(0,1fr);gap:11px;border:0;background:rgba(255,255,255,.15);cursor:pointer;text-align:left;width:100%}
.timeline-orb{width:40px;height:40px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.74);border-radius:50%;background:radial-gradient(circle at 30% 20%,rgba(255,255,255,.86),rgba(255,255,255,.23) 38%,color-mix(in srgb,var(--c) 23%,transparent));box-shadow:inset 0 0 12px rgba(255,255,255,.72)}
.timeline-copy strong{display:block;color:rgba(17,59,91,.82);font-size:13px;font-weight:500}
.timeline-copy time,.timeline-copy p{display:block;margin:3px 0 0;color:rgba(25,67,98,.46);font-size:10px}
.timeline-copy p{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:11px}

.companion-view{text-align:center;display:grid;grid-template-rows:auto auto minmax(0,1fr) auto auto auto;gap:8px;overflow:hidden;scrollbar-width:none}
.companion-view .view-heading,.profile-view .view-heading{text-align:left}
.companion-intro{display:grid;grid-template-columns:56px minmax(0,1fr) auto;align-items:center;gap:10px;text-align:left}
.companion-orb{position:relative;width:54px;height:54px;margin:0;display:grid;place-items:center;border:1px solid rgba(255,255,255,.78);border-radius:50%;background:radial-gradient(circle at 29% 20%,rgba(255,255,255,.94),rgba(255,255,255,.28) 33%,rgba(156,203,244,.16) 67%,rgba(255,255,255,.28));box-shadow:inset 0 0 16px rgba(255,255,255,.72),0 10px 24px rgba(79,103,137,.13);animation:companionBreathe 5.8s ease-in-out infinite}
.companion-orb i{position:absolute;width:58px;height:58px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.18),rgba(171,198,255,.18),transparent 70%);filter:blur(2px)}
.companion-orb span{position:relative;color:rgba(255,255,255,.94);font-size:17px;text-shadow:0 0 14px rgba(255,255,255,.9)}
.companion-copy strong{color:rgba(17,58,89,.84);font:400 18px "Songti SC",serif}
.companion-copy p{max-width:none;margin:4px 0 0;color:rgba(25,67,97,.53);font-size:10px;line-height:1.5}
.clear-ai-chat{align-self:start;margin-top:2px;padding:4px 1px;border:0;background:transparent;color:rgba(24,66,96,.34);font-size:9px}
.clear-ai-chat[hidden]{display:none}
.insight-grid{display:grid;gap:9px;text-align:left}
.insight-grid article{padding:13px 14px;border:1px solid rgba(255,255,255,.45);border-radius:19px;background:rgba(255,255,255,.16)}
.insight-grid small{color:rgba(25,68,99,.48);font-size:10px;letter-spacing:.08em}
.insight-grid p{margin:5px 0 0;color:rgba(18,60,91,.72);font-size:12px;line-height:1.6}
.ai-chat-shell{position:relative;min-width:0;min-height:0;overflow:hidden}
.ai-chat{width:100%;height:100%;min-height:0;overflow:auto;padding:5px 9px 3px 2px;display:flex;flex-direction:column;gap:8px;scrollbar-width:none;text-align:left;overscroll-behavior-y:contain;-webkit-overflow-scrolling:touch}
.ai-chat::-webkit-scrollbar{display:none}
.chat-scroll-track{position:absolute;z-index:5;right:1px;top:6px;bottom:6px;width:4px;border-radius:999px;background:rgba(255,255,255,.11);box-shadow:inset 0 0 2px rgba(12,43,72,.12);opacity:0;pointer-events:none;transition:opacity .28s ease}
.chat-scroll-track i{position:absolute;left:0;top:0;width:4px;height:var(--thumb-height,28%);border-radius:999px;background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(205,228,247,.48));box-shadow:0 0 6px rgba(255,255,255,.48),inset 0 1px 2px rgba(255,255,255,.86);transform:translateY(var(--thumb-y,0px));transition:height .18s ease,transform .08s linear}
.ai-chat-shell.scrollable .chat-scroll-track{opacity:.48}.ai-chat-shell.scrolling .chat-scroll-track{opacity:.94}
.chat-message{display:flex;align-items:flex-end;gap:7px;max-width:88%;animation:viewReveal .25s ease}
.chat-message.user{align-self:flex-end;flex-direction:row-reverse}
.chat-avatar{flex:0 0 24px;width:24px;height:24px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.65);border-radius:50%;background:radial-gradient(circle at 30% 20%,rgba(255,255,255,.9),rgba(255,255,255,.24) 40%,rgba(164,204,245,.18));color:white;font-size:10px;box-shadow:inset 0 0 8px rgba(255,255,255,.65)}
.chat-bubble{padding:10px 12px;border:1px solid rgba(255,255,255,.45);border-radius:17px 17px 17px 5px;background:rgba(255,255,255,.18);color:rgba(17,59,91,.72);font-size:11px;line-height:1.6;box-shadow:inset 0 1px 3px rgba(255,255,255,.54),0 6px 14px rgba(63,79,99,.06);white-space:pre-wrap}
.chat-message.user .chat-bubble{border-radius:17px 17px 5px 17px;background:linear-gradient(145deg,rgba(220,241,253,.35),rgba(255,255,255,.19));color:rgba(15,58,90,.84)}
.ai-prompts{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding:1px}
.ai-prompts::-webkit-scrollbar{display:none}
.ai-prompts button{flex:none;height:28px;padding:0 11px;border:1px solid rgba(255,255,255,.45);border-radius:999px;background:rgba(255,255,255,.14);color:rgba(21,64,95,.57);font-size:9px;white-space:nowrap}
.ai-composer{display:grid;grid-template-columns:minmax(0,1fr) 38px;align-items:end;gap:7px;padding:6px 7px 6px 12px;border:1px solid rgba(255,255,255,.58);border-radius:22px;background:linear-gradient(155deg,rgba(255,255,255,.31),rgba(244,250,254,.13));-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:inset 0 1px 4px rgba(255,255,255,.72),0 8px 18px rgba(56,75,98,.08)}
.ai-composer textarea{
  width:100%;min-height:34px;max-height:74px;margin:0;padding:8px 0!important;
  border:0!important;border-radius:0!important;
  background:none!important;background-color:transparent!important;background-image:none!important;
  -webkit-appearance:none;appearance:none;
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important;
  box-shadow:none!important;outline:none!important;
  color:rgba(15,58,90,.84);font:400 12px/1.45 -apple-system,BlinkMacSystemFont,"PingFang SC",sans-serif;resize:none;
}
.ai-composer textarea::placeholder{color:rgba(24,66,96,.38)}
.ai-composer button{width:36px;height:36px;border:1px solid rgba(255,255,255,.68);border-radius:50%;background:linear-gradient(155deg,rgba(255,255,255,.54),rgba(208,233,250,.25));color:rgba(14,60,93,.8);font-size:18px;box-shadow:inset 0 1px 4px rgba(255,255,255,.82),0 5px 12px rgba(58,81,108,.11)}
.privacy-note{margin:0;color:rgba(27,68,98,.38);font-size:8px}
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}

.profile-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:15px}
.profile-summary div{display:grid;place-items:center;padding:15px 5px;border:1px solid rgba(255,255,255,.48);border-radius:20px;background:rgba(255,255,255,.17)}
.profile-summary strong{color:rgba(16,59,91,.84);font:400 23px "SF Pro Display",sans-serif}
.profile-summary span{margin-top:3px;color:rgba(25,68,98,.44);font-size:10px}
.sky-mood-setting{margin:0 0 12px;padding:12px 13px 11px;border:1px solid rgba(255,255,255,.42);border-radius:23px;background:linear-gradient(155deg,rgba(255,255,255,.075),rgba(226,242,252,.015));box-shadow:inset 0 1px 3px rgba(255,255,255,.54)}
.sky-mood-head{display:flex;align-items:end;justify-content:space-between;gap:10px;margin-bottom:10px}
.sky-mood-head small{display:block;color:rgba(255,255,255,.58);font-size:9px;letter-spacing:.11em}
.sky-mood-head strong{display:block;margin-top:2px;color:rgba(255,255,255,.9);font-size:12px;font-weight:500}
.sky-mood-head>span{color:rgba(255,255,255,.58);font-size:9px}
.sky-mood-options{display:grid;grid-template-columns:repeat(4,1fr);gap:5px}
.sky-mood-options button{min-width:0;padding:2px 0 0;border:0;background:transparent;color:rgba(255,255,255,.62);font:inherit;cursor:pointer}
.sky-mood-options button:focus{outline:none}
.sky-mood-options button:focus-visible .sky-mood-orb{box-shadow:inset 0 1px 6px rgba(255,255,255,.9),0 0 0 2px rgba(255,255,255,.48),0 0 0 4px rgba(93,123,158,.2)}
.sky-mood-options button small{display:block;margin-top:5px;font-size:8px;white-space:nowrap}
.sky-mood-orb{position:relative;display:block;width:46px;height:46px;margin:auto;border:1px solid rgba(255,255,255,.66);border-radius:50%;background-position:center;background-size:cover;box-shadow:inset 0 1px 5px rgba(255,255,255,.72),0 6px 13px rgba(48,69,94,.08);transition:transform .25s ease,box-shadow .25s ease}
.sky-mood-orb::after{content:"";position:absolute;left:11px;top:8px;width:15px;height:7px;border-radius:50%;border-top:2px solid rgba(255,255,255,.65);transform:rotate(-18deg)}
.sky-mood-options button[data-sky-mood="mist"] .sky-mood-orb{background-image:url("assets/app-background-airy-slate-dim-v22.png")}
.sky-mood-options button[data-sky-mood="moon"] .sky-mood-orb{background-image:url("assets/app-background-moon-tide-dim-v23.png")}
.sky-mood-options button[data-sky-mood="dusk"] .sky-mood-orb{background-image:url("assets/app-background-dusk-lilac-dim-v24.png")}
.sky-mood-options button[data-sky-mood="night"] .sky-mood-orb{background-image:url("assets/app-background-clean-sky-v18.png")}
.sky-mood-options button.active{color:rgba(255,255,255,.96)}
.sky-mood-options button.active .sky-mood-orb{transform:translateY(-2px) scale(1.06);box-shadow:inset 0 1px 6px rgba(255,255,255,.9),0 0 0 2px rgba(255,255,255,.34),0 8px 18px rgba(48,69,94,.12)}
.settings-list{overflow:hidden;border:1px solid rgba(255,255,255,.48);border-radius:23px;background:rgba(255,255,255,.15)}
.settings-list button{display:flex;align-items:center;justify-content:space-between;width:100%;height:52px;padding:0 16px;border:0;border-bottom:1px solid rgba(255,255,255,.28);background:transparent;color:rgba(17,59,90,.76);font-size:13px;text-align:left}
.settings-list button:last-child{border-bottom:0}.settings-list i{font-size:22px;font-style:normal;color:rgba(24,66,96,.35)}
.settings-list button>span{display:grid;gap:2px}.settings-list button>span>small{font-size:8px;font-weight:400;color:rgba(255,255,255,.58)!important}
.ai-config-modal form{display:grid;gap:10px}.ai-config-modal form>small{margin-bottom:-5px}.ai-config-modal h2{margin-bottom:-2px}
.ai-config-intro{margin:0;color:rgba(255,255,255,.66)!important;font-size:10px;line-height:1.55}
.ai-config-modal label{display:grid;gap:5px;margin:0!important;color:rgba(255,255,255,.74)!important;font-size:9px}
.ai-config-modal label[hidden]{display:none!important}
.ai-config-modal input,.ai-config-modal select{width:100%;height:42px;margin:0!important;padding:0 12px;border:1px solid rgba(255,255,255,.48)!important;border-radius:15px!important;background:linear-gradient(155deg,rgba(255,255,255,.22),rgba(244,250,254,.08))!important;color:rgba(255,255,255,.92)!important;box-shadow:inset 0 1px 3px rgba(255,255,255,.46)!important;font:400 11px var(--font-interface)}
.ai-config-modal select option{color:#263f59;background:#dce5ef}.secret-field{position:relative;display:block}.secret-field input{padding-right:56px!important}.secret-field button{position:absolute;right:5px;top:5px;width:45px;height:32px;padding:0;border:0;border-radius:11px;background:rgba(255,255,255,.14);color:rgba(255,255,255,.72);font-size:9px}
.ai-config-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:2px}.ai-config-actions button{height:42px;margin:0!important;border:1px solid rgba(255,255,255,.52);border-radius:999px;background:rgba(255,255,255,.13);color:#fff;font-size:10px}.ai-config-actions .primary{width:100%!important}
.ai-config-status{min-height:15px;margin:0;text-align:center;color:rgba(255,255,255,.78)!important;font-size:9px;line-height:1.5}.ai-config-note{margin:0;text-align:center;color:rgba(255,255,255,.46)!important;font-size:8px;line-height:1.5}
.habit-list-modal{overflow-x:hidden!important}
.habit-list-modal form{width:100%!important;max-width:100%!important;overflow:hidden!important;box-sizing:border-box!important}
.habit-manager-summary{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;padding:11px 13px;border:1px solid rgba(255,255,255,.45);border-radius:18px;background:rgba(255,255,255,.14);color:rgba(22,64,95,.54);font-size:10px}
.habit-manager-summary strong{color:rgba(16,59,91,.82);font-size:18px;font-weight:400}
.habit-manager-list{max-height:330px;margin-bottom:13px;overflow:auto;display:grid;gap:8px;scrollbar-width:none}
.habit-manager-list::-webkit-scrollbar{display:none}
.habit-manager-empty{padding:40px 12px;text-align:center;color:rgba(24,67,98,.45);font-size:11px;line-height:1.7}
.habit-manager-item{display:grid;grid-template-columns:42px minmax(0,1fr) auto;align-items:center;gap:10px;width:100%;min-height:64px;padding:9px 11px;border:1px solid rgba(255,255,255,.48);border-radius:20px;background:rgba(255,255,255,.16);color:rgba(16,59,91,.8);text-align:left;box-shadow:inset 0 1px 3px rgba(255,255,255,.52)}
.habit-manager-orb{width:40px;height:40px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.72);border-radius:50%;background:radial-gradient(circle at 30% 20%,rgba(255,255,255,.9),rgba(255,255,255,.25) 38%,color-mix(in srgb,var(--c) 22%,transparent));box-shadow:inset 0 0 11px rgba(255,255,255,.72),0 5px 12px rgba(65,81,101,.08)}
.habit-manager-orb i{width:7px;height:7px;border-radius:50%;background:var(--c);box-shadow:0 0 8px var(--c)}
.habit-manager-copy strong{display:block;font-size:13px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.habit-manager-copy small{display:block;margin-top:4px;color:rgba(25,67,98,.43);font-size:9px}.habit-manager-chevron{color:rgba(24,66,96,.32);font-size:20px}
.habit-list-modal .primary{height:43px}
.music-modal{overflow-x:hidden!important}.music-modal form{width:100%!important;max-width:100%!important;overflow:hidden!important;box-sizing:border-box!important}
.music-intro{margin:-13px 0 15px;color:rgba(24,66,96,.48);font-size:10px;line-height:1.55}
.sound-presets{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:15px}
.sound-presets button{display:grid;place-items:center;gap:2px;min-width:0;height:82px;padding:8px 4px;border:1px solid rgba(255,255,255,.48);border-radius:20px;background:rgba(255,255,255,.14);color:rgba(18,61,93,.67);box-shadow:inset 0 1px 3px rgba(255,255,255,.52)}
.sound-presets button>span{font-size:23px;line-height:1}.sound-presets strong{font-size:11px;font-weight:500}.sound-presets small{font-size:8px;color:rgba(25,67,97,.4)}
.sound-presets button.active{border-color:rgba(255,255,255,.72);background:linear-gradient(155deg,rgba(255,255,255,.38),rgba(220,239,251,.18));box-shadow:inset 0 1px 4px rgba(255,255,255,.8),0 8px 18px rgba(55,78,105,.09)}
.volume-control{display:grid!important;grid-template-columns:36px minmax(0,1fr) 34px;align-items:center;gap:8px;margin:0 0 14px!important;color:rgba(19,62,93,.58)!important;font-size:10px!important}
.volume-control input{width:100%;height:4px;margin:0;padding:0;border:0;background:rgba(255,255,255,.34);accent-color:#79b9d7;box-shadow:none}.volume-control output{text-align:right;font-size:9px;color:rgba(24,67,98,.42)}
.upload-music{display:grid!important;grid-template-columns:34px minmax(0,1fr);align-items:center;gap:10px;margin:0 0 10px!important;padding:11px 12px;border:1px solid rgba(255,255,255,.44);border-radius:18px;background:rgba(255,255,255,.13);cursor:pointer}
.upload-music>span{width:32px;height:32px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.58);border-radius:50%;background:rgba(255,255,255,.18);font-size:17px}.upload-music strong{display:block;color:rgba(17,59,91,.7);font-size:10px;font-weight:500}.upload-music small{display:block;margin-top:3px;color:rgba(25,67,97,.38);font-size:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#musicUpload{display:none!important;position:absolute!important;width:0!important;height:0!important;opacity:0!important;pointer-events:none!important}
.music-modal .secondary-btn{display:flex;align-items:center;justify-content:center;width:100%;height:40px;padding:0;box-sizing:border-box;border-radius:15px;line-height:1}.music-note{margin:9px 0 0;color:rgba(25,67,97,.34);font-size:8px;line-height:1.5;text-align:center}
.music-feedback{min-height:15px;margin:6px 0 0;color:rgba(16,62,94,.66);font-size:9px;line-height:15px;text-align:center;opacity:0;transform:translateY(3px);transition:opacity .22s ease,transform .22s ease}
.music-feedback.show{opacity:1;transform:none}
.ai-memory-modal form{color:rgba(18,60,91,.78)}
.memory-status{display:grid;grid-template-columns:48px minmax(0,1fr);align-items:center;gap:11px;margin-bottom:14px;padding:12px;border:1px solid rgba(255,255,255,.48);border-radius:20px;background:rgba(255,255,255,.17)}
.memory-status-orb{width:46px;height:46px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.72);border-radius:50%;background:radial-gradient(circle at 29% 20%,rgba(255,255,255,.94),rgba(255,255,255,.27) 36%,rgba(161,203,244,.18));color:white;text-shadow:0 0 10px white;box-shadow:inset 0 0 13px rgba(255,255,255,.7)}
.memory-status strong{display:block;font-size:13px;font-weight:500}.memory-status p{margin:4px 0 0;color:rgba(25,67,97,.48);font-size:10px;line-height:1.5}
.memory-scope{overflow:hidden;margin-bottom:14px;border:1px solid rgba(255,255,255,.42);border-radius:19px;background:rgba(255,255,255,.12)}
.memory-scope div{display:flex;justify-content:space-between;align-items:center;height:39px;padding:0 13px;border-bottom:1px solid rgba(255,255,255,.25);font-size:11px}.memory-scope div:last-child{border-bottom:0}.memory-scope small{color:rgba(25,67,97,.42);font-size:9px}
.memory-toggle{display:flex!important;align-items:center;justify-content:space-between;gap:10px;margin:0 0 14px!important;padding:12px 13px;border:1px solid rgba(255,255,255,.43);border-radius:19px;background:rgba(255,255,255,.13)}
.memory-toggle>span{display:block}.memory-toggle strong{display:block;color:rgba(17,59,90,.75);font-size:11px;font-weight:500}.memory-toggle small{display:block;margin-top:3px;color:rgba(25,67,97,.4);font-size:8px;line-height:1.4}
.memory-toggle input{position:absolute;opacity:0;pointer-events:none}.memory-toggle i{position:relative;flex:0 0 42px;width:42px;height:24px;border-radius:999px;background:rgba(76,104,130,.22);box-shadow:inset 0 1px 4px rgba(64,83,105,.12);transition:.25s}.memory-toggle i::after{content:"";position:absolute;left:3px;top:3px;width:18px;height:18px;border-radius:50%;background:rgba(255,255,255,.88);box-shadow:0 3px 8px rgba(48,65,84,.16);transition:.25s}.memory-toggle input:checked+i{background:rgba(93,179,211,.52)}.memory-toggle input:checked+i::after{transform:translateX(18px)}
.memory-action{width:100%;height:42px;margin:0 0 8px;border-radius:15px}.memory-help{margin:4px 0 0;color:rgba(25,67,97,.38);font-size:8px;line-height:1.5;text-align:center}
@keyframes viewReveal{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
@keyframes companionBreathe{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-5px) scale(1.025)}}
@keyframes musicFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@keyframes musicPulse{0%,100%{transform:scale(.7);box-shadow:0 0 5px rgba(255,255,255,.65)}50%{transform:scale(1.25);box-shadow:0 0 12px rgba(255,255,255,1)}}
@keyframes tabPop{0%{transform:scale(1)}42%{transform:translateY(-4px) scale(1.16)}72%{transform:translateY(1px) scale(.96)}100%{transform:none}}
@keyframes tabRipple{0%{opacity:.68;transform:translate(-50%,-50%) scale(.35)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.45)}}
@keyframes starBreath{
  0%,100%{opacity:calc(var(--o) * .22);filter:brightness(.78)}
  28%{opacity:calc(var(--o) * .48);filter:brightness(.94)}
  54%{opacity:var(--o);filter:brightness(1.45)}
  78%{opacity:calc(var(--o) * .57);filter:brightness(1.02)}
}
@keyframes headerStarBreath{
  0%,100%{opacity:calc(var(--o) * .24);filter:brightness(.8);transform:scale(.78)}
  28%{opacity:calc(var(--o) * .5);filter:brightness(1);transform:scale(.92)}
  52%{opacity:var(--o);filter:brightness(1.75);transform:scale(1.24)}
  73%{opacity:calc(var(--o) * .58);filter:brightness(1.08);transform:scale(.96)}
}
@keyframes meteorBreathe{
  0%,100%{opacity:.035;filter:brightness(.75) drop-shadow(0 0 2px rgba(218,235,255,.25));transform:translate3d(-2px,2px,0) rotate(-38deg) scaleX(.92)}
  36%{opacity:calc(var(--mo) * .42);filter:brightness(1) drop-shadow(0 0 3px rgba(218,235,255,.42));transform:translate3d(0,0,0) rotate(-38deg) scaleX(.98)}
  58%{opacity:var(--mo);filter:brightness(1.45) drop-shadow(0 0 5px rgba(218,235,255,.68));transform:translate3d(2px,-2px,0) rotate(-38deg) scaleX(1.04)}
  82%{opacity:calc(var(--mo) * .31);filter:brightness(.92) drop-shadow(0 0 2px rgba(218,235,255,.3));transform:translate3d(0,0,0) rotate(-38deg) scaleX(.97)}
}
@keyframes starLayerDrift{from{transform:translate3d(-1px,2px,0)}to{transform:translate3d(2px,-4px,0)}}
@keyframes dreamHazeDrift{
  from{transform:translate3d(-1.5%,-1%,0) scale(1.01)}
  to{transform:translate3d(2%,1.5%,0) scale(1.055)}
}
@keyframes dreamHazeBreathe{
  from{opacity:.58;transform:translateX(-1.5%)}
  to{opacity:.9;transform:translateX(1.5%)}
}
@media(max-height:760px){
  .app{padding-top:calc(8px + env(safe-area-inset-top))!important;gap:8px!important}
  header{min-height:54px}h1{font-size:35px!important}header small{font-size:10px!important}
  nav{height:68px!important;min-height:68px!important}
  #sky{padding-top:16px!important}.page-head{height:78px!important}
  .calendar{height:calc(100% - 80px)!important}
}
@media(max-width:430px){
  html,body{
    width:100%;
    height:100%;
    min-height:100%;
    background:var(--sky-fallback,#66798e) var(--sky-image,url("assets/app-background-airy-slate-dim-v22.png")) center/cover fixed no-repeat;
  }
  body{
    display:block;
    min-height:100vh;
    min-height:100dvh;
  }
  .depth-scene,
  .app{
    width:100vw!important;
    max-width:none!important;
    height:100vh!important;
    height:100dvh!important;
    max-height:none!important;
  }
  .depth-scene{
    position:fixed!important;
    left:0!important;
    right:0!important;
    top:0!important;
    bottom:auto!important;
    height:calc(100dvh + env(safe-area-inset-bottom, 0px) + 2px)!important;
    transform:none!important;
    background-position:center bottom!important;
  }
  .app{
    margin:0!important;
  }
}
@media (display-mode:standalone) and (max-width:430px){
  body{
    min-height:100dvh;
  }
  .app{
    height:100dvh!important;
    padding-bottom:calc(env(safe-area-inset-bottom, 0px) + 7px)!important;
  }
}
@media(min-width:431px){
  body{
    padding:28px;
    box-sizing:border-box;
    background:
      radial-gradient(circle at 50% 42%,#fff 0,#f4f6f9 42%,#e7ebf0 100%);
  }
  body::before{content:none!important}
  .depth-scene,
  .app{
    width:min(calc(100vw - 56px),var(--app-width))!important;
    height:min(calc(100dvh - 56px),var(--app-height))!important;
    border-radius:46px!important;
  }
  .app{
    box-shadow:
      0 0 0 7px rgba(42,49,59,.9),
      0 30px 90px rgba(43,55,70,.24)!important;
  }
}
@media(prefers-reduced-motion:reduce){
  .dream-haze,.depth-scene::before,.dream-stars,.music-button,.music-button i{animation:none!important}
  .dream-stars i{animation:starBreath var(--t) ease-in-out var(--d) infinite!important}
  .dream-stars i.header-star{animation:headerStarBreath var(--t) ease-in-out var(--d) infinite!important}
  .dream-stars .dream-meteor{animation:meteorBreathe var(--mt) ease-in-out var(--md) infinite!important}
}

@font-face{
  font-family:"Furi WenKai";
  src:url("assets/fonts/lxgw-wenkai/LXGWWenKaiLite-Regular.ttf") format("truetype");
  font-style:normal;
  font-weight:400;
  font-display:swap;
}
@font-face{
  font-family:"Furi Noto Sans SC";
  src:url("assets/fonts/noto-sans-sc/NotoSansSC-VF.ttf") format("truetype-variations");
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
}

/* Embedded app typography: identical on Windows preview, iOS and packaged app. */
:root{
  --font-editorial:"Furi WenKai","LXGW WenKai","Songti SC",serif;
  --font-interface:"Furi Noto Sans SC","Noto Sans SC",-apple-system,BlinkMacSystemFont,sans-serif;
}
body,button,input,textarea,select,output{
  font-family:var(--font-interface)!important;
}
h1,.page-head span,.view-heading h2,form h2,#celebrate h2,#empty,.companion-copy strong{
  font-family:var(--font-editorial)!important;
  font-weight:400!important;
}
.day-number,.bubble-date,.profile-summary strong,.tab-icon{
  font-family:var(--font-interface)!important;
}

/* Clear liquid-glass material: high transmission, thin refractive edge, no milky frost. */
:root{
  --liquid-fill:
    radial-gradient(ellipse at 18% 0%,rgba(255,255,255,.075),transparent 37%),
    linear-gradient(180deg,rgba(255,255,255,.05),rgba(237,248,255,.016) 45%,rgba(207,232,248,.008));
  --liquid-border:rgba(255,255,255,.45);
  --liquid-shadow:
    inset 0 1px 2px rgba(255,255,255,.72),
    inset 0 -1px 2px rgba(177,218,242,.14),
    inset 8px 0 18px rgba(255,255,255,.018),
    0 10px 24px rgba(35,67,101,.045),
    0 0 0 .5px rgba(178,222,245,.16);
}
.habit-nav,#sky,.archive-view,.companion-view,.profile-view,.record-page-form,dialog{
  border-color:var(--liquid-border)!important;
  background:var(--liquid-fill)!important;
  -webkit-backdrop-filter:blur(2.5px) saturate(1.06) brightness(1.015)!important;
  backdrop-filter:blur(2.5px) saturate(1.06) brightness(1.015)!important;
  box-shadow:var(--liquid-shadow)!important;
}
.habit-nav{background:
  linear-gradient(100deg,rgba(255,255,255,.055),rgba(255,255,255,.008) 48%,rgba(216,239,252,.018)),
  radial-gradient(ellipse at 17% 0%,rgba(255,255,255,.075),transparent 42%)!important}
.pill,.plus,.music-button,.record-back,.record-picker button,.sound-presets button,.habit-manager-item,.mini-bubble,.memory-bubble,.companion-orb,.ai-composer button{
  border-color:rgba(255,255,255,.52)!important;
  background:
    radial-gradient(circle at 27% 18%,rgba(255,255,255,.32),transparent 31%),
    linear-gradient(155deg,rgba(255,255,255,.11),rgba(219,239,252,.03))!important;
  -webkit-backdrop-filter:blur(5px) saturate(1.1)!important;
  backdrop-filter:blur(5px) saturate(1.1)!important;
  box-shadow:inset 0 1px 3px rgba(255,255,255,.82),inset 0 -1px 2px rgba(174,216,241,.17),0 7px 17px rgba(53,96,135,.07)!important;
}
.pill.active,.record-picker button.active,.sound-presets button.active{
  border-color:rgba(255,255,255,.62)!important;
  background:
    radial-gradient(circle at 25% 13%,rgba(255,255,255,.38),transparent 34%),
    linear-gradient(155deg,rgba(255,255,255,.15),color-mix(in srgb,var(--bubble-light) 11%,rgba(215,237,251,.03)))!important;
}
.habit-group,.timeline-item,.settings-list,.profile-summary div,.habit-manager-summary,.memory-status,.memory-toggle,.insight-grid article,.chat-bubble,.ai-composer,.upload-music{
  border-color:rgba(255,255,255,.4)!important;
  background:linear-gradient(155deg,rgba(255,255,255,.038),rgba(226,242,252,.006))!important;
  -webkit-backdrop-filter:blur(1.8px) saturate(1.04)!important;
  backdrop-filter:blur(1.8px) saturate(1.04)!important;
  box-shadow:inset 0 1px 2px rgba(255,255,255,.5),0 6px 15px rgba(53,91,127,.025)!important;
}
.record-page-editor{
  border-color:rgba(255,255,255,.37)!important;
  background:linear-gradient(155deg,rgba(255,255,255,.03),rgba(215,237,251,.004))!important;
  -webkit-backdrop-filter:blur(1.5px) saturate(1.05)!important;
  backdrop-filter:blur(1.5px) saturate(1.05)!important;
  box-shadow:inset 0 1px 2px rgba(255,255,255,.48),inset 0 -1px 2px rgba(175,218,243,.12)!important;
}

/* Blue-water starlight environment: luminous reflections, with blue—not black—as the base. */
.depth-scene{
  background:var(--sky-fallback,#66798e) var(--sky-image,url("assets/app-background-airy-slate-dim-v22.png")) center/cover no-repeat!important;
  filter:none!important;
}
.depth-scene::after{
  content:none!important;
  display:none!important;
}
.dream-haze{display:none!important}
.dream-stars{display:block!important;mix-blend-mode:screen;opacity:.82}
.dream-stars-far{opacity:.66}.dream-stars-near{opacity:.86}

/* White-on-water typography: clear primary text and softer white supporting text. */
:root{
  --dream-ink:rgba(255,255,255,.94);
  --ink-heading:rgba(255,255,255,.97);
  --ink-body:rgba(255,255,255,.84);
  --ink-meta:rgba(255,255,255,.68);
  --ink-placeholder:rgba(255,255,255,.52);
}
.app,
.app button,.app input,.app textarea,.app select,.app output,
.app h1,.app h2,.app h3,.app strong,.app b,.app time,
.app .page-head span,.app .record-topbar h2,.app .record-page-form>label,
.app .view-heading h2,.app .companion-copy strong,.app .profile-summary strong,
.app .habit-group-head,.app .timeline-copy strong,.app .habit-manager-item,
.app .settings-list button,.app .chat-bubble,.app .chat-message.user .chat-bubble,
.app .record-page-editor .ql-editor{
  color:rgba(255,255,255,.94)!important;
  text-shadow:0 1px 7px rgba(2,19,45,.3)!important;
}
.app small,.app p,.app label,.app footer,.app footer button,
.app .header-tagline,.app .page-head strong,.app .page-head i,
.app .record-topbar small,.app .record-topbar>span,.app .record-date-line,
.app .today-footer,.app .today-footer button,.app .view-heading small,
.app .habit-group-head small,.app .timeline-copy time,.app .timeline-copy p,
.app .companion-copy p,.app .privacy-note,.app .settings-list i,
.app .habit-manager-copy small,.app .music-intro,.app .sound-presets small,
.app .volume-control,.app .volume-control output,.app .upload-music small,
.app .music-note,.app .music-feedback,.app .memory-status p,
.app .memory-scope small,.app .memory-toggle small,.app .memory-help,
.app .record-save-state{
  color:rgba(255,255,255,.68)!important;
  text-shadow:0 1px 6px rgba(2,19,45,.26)!important;
}
.app input::placeholder,.app textarea::placeholder,
.app .record-page-editor .ql-editor.ql-blank::before{
  color:rgba(255,255,255,.5)!important;
  text-shadow:0 1px 6px rgba(2,19,45,.24)!important;
}
.app .record-back::before,.app .record-back::after{background:rgba(255,255,255,.92)!important}
.app .tab-bar button{color:rgba(255,255,255,.66)!important}
.app .tab-bar button.active{color:#fff!important}
.app .day-number{color:rgba(255,255,255,.62)!important}
.app .day-cell.today:not(.done) .day-number{color:rgba(255,255,255,.9)!important}
.app .day-cell.done .day-number,.app .bubble-date{color:#fff!important}
.app .record-toolbar button,.app .record-image-button,
.app .ai-composer textarea,.app .ai-composer button{color:rgba(255,255,255,.86)!important}

/* Complete the light-on-sky type system for non-paragraph status elements. */
.app #empty,.app .archive-empty,.app .habit-manager-empty{
  color:rgba(255,255,255,.72)!important;
  text-shadow:0 1px 8px rgba(2,19,45,.34)!important;
}
.app .profile-summary span,.app .sky-mood-options button small,
.app .record-picker button,.app .mini-bubble,.app .timeline-orb,
.app .habit-manager-summary,.app .habit-manager-chevron,
.app .clear-ai-chat,.app .ai-prompts button,.app .privacy-note{
  color:rgba(255,255,255,.7)!important;
  text-shadow:0 1px 7px rgba(2,19,45,.3)!important;
}
.app .profile-summary strong,.app .habit-group-head,
.app .timeline-copy strong,.app .habit-manager-copy strong,.app .insight-grid p{
  color:rgba(255,255,255,.94)!important;
  text-shadow:0 1px 8px rgba(2,19,45,.34)!important;
}

/* Habit detail and its private companion. */
.active-habit-title{
  display:block;width:max-content;max-width:100%;margin:0 auto;padding:0;border:0;background:transparent;
  color:rgba(255,255,255,.96);font:400 25px/1.2 var(--font-editorial);text-shadow:0 1px 7px rgba(2,19,45,.3);cursor:pointer;
}
.active-habit-title:disabled{cursor:default}.active-habit-title:not(:disabled):active{transform:scale(.95)}
.page-head>small{display:block;margin-top:2px;color:rgba(255,255,255,.55);font-size:8px;letter-spacing:.04em}
.page-head>small[hidden]{display:none}
.habit-detail-view{display:grid;grid-template-rows:auto auto minmax(0,1fr);gap:14px;min-height:0;overflow:hidden;padding:1px 3px 0}
.habit-detail-topbar,.habit-ai-topbar{display:grid;grid-template-columns:44px minmax(0,1fr) 44px;align-items:center;gap:10px;text-align:center}
.habit-detail-topbar h2,.habit-ai-topbar h2{margin:0;color:#fff;font:400 23px/1.2 var(--font-editorial);text-shadow:0 1px 7px rgba(2,19,45,.3)}
.habit-detail-topbar small,.habit-ai-topbar small{display:flex;align-items:center;justify-content:center;gap:5px;margin-top:3px;color:rgba(255,255,255,.7);font-size:8px}
.habit-detail-topbar small i{display:inline-block;width:6px;height:6px;border-radius:50%}
.detail-music-button{width:42px;height:42px;padding:0;border:1px solid rgba(255,255,255,.68);border-radius:50%;background:radial-gradient(circle at 29% 20%,rgba(255,255,255,.68),rgba(255,255,255,.18) 45%,rgba(210,231,247,.1));color:#fff;font:500 19px/1 Georgia,serif;box-shadow:inset 0 1px 5px rgba(255,255,255,.76),0 7px 17px rgba(42,63,89,.1)}
.habit-month-card,.habit-companion-preview{
  border:1px solid rgba(255,255,255,.46);background:linear-gradient(180deg,rgba(255,255,255,.065),rgba(244,249,253,.012));
  -webkit-backdrop-filter:blur(2px) saturate(1.04);backdrop-filter:blur(2px) saturate(1.04);box-shadow:inset 0 1px 3px rgba(255,255,255,.58),0 10px 25px rgba(45,64,89,.035)
}
.habit-month-card{padding:18px 17px 15px;border-radius:29px}
.habit-month-card h3,.habit-companion-preview h3{margin:0;color:#fff;font:400 21px/1.25 var(--font-editorial);text-shadow:0 1px 7px rgba(2,19,45,.28)}
.habit-month-card>p{margin:5px 0 12px;color:rgba(255,255,255,.68);font-size:9px}
.habit-recent-bubbles{display:flex;align-items:center;justify-content:flex-start;gap:10px;min-height:58px;overflow-x:auto;scrollbar-width:none}
.habit-recent-bubbles::-webkit-scrollbar{display:none}
.habit-date-orb{flex:0 0 55px;width:55px;height:55px;padding:0;border:1px solid rgba(255,255,255,.74);border-radius:50%;background:radial-gradient(circle at 30% 20%,rgba(255,255,255,.84),rgba(255,255,255,.22) 36%,color-mix(in srgb,var(--bubble-primary) 18%,transparent));color:#fff;font-size:11px;box-shadow:inset 0 0 14px rgba(255,255,255,.68),0 8px 17px rgba(42,63,88,.09);transition:transform .22s ease}
.habit-date-orb:active{transform:scale(.9)}
.habit-detail-empty{width:100%;margin:0;text-align:center;color:rgba(255,255,255,.52);font-size:10px}
.habit-companion-preview{min-height:0;display:grid;grid-template-rows:auto auto minmax(0,1fr) auto;gap:11px;padding:17px;border-radius:31px;overflow:hidden}
.habit-companion-preview>small{color:rgba(255,255,255,.72);font-size:10px;font-weight:500}
.habit-ai-intro{display:grid;grid-template-columns:82px minmax(0,1fr);align-items:center;gap:14px}
.habit-ai-intro h3{font-size:19px}.habit-ai-intro p{margin:6px 0 0;color:rgba(255,255,255,.65);font-size:9px;line-height:1.65}
.habit-companion-orb,.habit-chat-orb{position:relative;display:grid;place-items:center;border:1px solid rgba(255,255,255,.82);border-radius:50%;background:radial-gradient(circle at 28% 19%,rgba(255,255,255,.96),rgba(255,255,255,.31) 30%,rgba(128,184,228,.14) 67%,rgba(255,255,255,.21));box-shadow:inset 0 0 18px rgba(255,255,255,.78),0 10px 28px rgba(49,73,103,.14),0 0 24px rgba(231,244,255,.15);animation:companionBreathe 6s ease-in-out infinite}
.habit-companion-orb{width:78px;height:78px;padding:0}.habit-companion-orb i,.habit-chat-orb i{position:absolute;inset:-5px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.16),transparent 70%);filter:blur(2px)}
.habit-companion-orb span,.habit-chat-orb span{position:relative;color:#fff;font-size:25px;text-shadow:0 0 15px rgba(255,255,255,.95)}
.habit-companion-observation{align-self:center;margin:0;padding:11px 13px;border:1px solid rgba(255,255,255,.42);border-radius:18px;background:rgba(255,255,255,.1);color:rgba(255,255,255,.78);font-size:10px;line-height:1.65;text-align:left}
.open-habit-companion{height:38px;border:1px solid rgba(255,255,255,.52);border-radius:999px;background:linear-gradient(155deg,rgba(255,255,255,.26),rgba(238,248,254,.09));color:#fff;font-size:10px;box-shadow:inset 0 1px 3px rgba(255,255,255,.62)}
.open-habit-companion span{margin-left:4px;font-size:17px;vertical-align:-1px}.open-habit-companion:active{transform:scale(.97)}
.habit-companion-view{display:grid;grid-template-rows:auto 118px minmax(0,1fr) auto auto auto;gap:10px;min-height:0;overflow:hidden;padding:1px 3px 0}
.habit-ai-topbar small{width:max-content;margin:4px auto 0;padding:3px 8px;border:1px solid rgba(255,255,255,.24);border-radius:999px;background:rgba(255,255,255,.07)}
.habit-chat-orb{align-self:center;justify-self:center;width:92px;height:92px}.habit-chat-orb span{font-size:29px}
.habit-ai-chat{padding:6px 2px;gap:9px}.habit-ai-chat .chat-message{max-width:92%}
.habit-ai-prompts{justify-content:center}.habit-ai-prompts button{height:32px;padding-inline:13px;color:rgba(255,255,255,.8)!important}
.habit-ai-composer{background:linear-gradient(155deg,rgba(255,255,255,.2),rgba(244,250,254,.07));border-color:rgba(255,255,255,.52)}
.habit-ai-composer textarea{background:transparent!important;box-shadow:none!important;border:0!important}
.habit-companion-view>.privacy-note{margin:0;text-align:center;color:rgba(255,255,255,.48)!important;font-size:8px}
body.record-page-open .habit-detail-view,body.record-page-open .habit-companion-view{height:100%;max-height:calc(100dvh - 29px - env(safe-area-inset-top) - env(safe-area-inset-bottom))}

/* The deepest sky needs its own readable profile palette. Keep the glass clear;
   only the typography adapts to the darker environment. */
body[data-sky-mood="night"] .profile-view .view-heading h2,
body[data-sky-mood="night"] .profile-view .profile-summary strong,
body[data-sky-mood="night"] .profile-view .sky-mood-head strong,
body[data-sky-mood="night"] .profile-view .settings-list button{
  color:rgba(255,255,255,.96)!important;
  text-shadow:0 1px 8px rgba(4,20,43,.34)!important;
}
body[data-sky-mood="night"] .profile-view .view-heading small,
body[data-sky-mood="night"] .profile-view .profile-summary span,
body[data-sky-mood="night"] .profile-view .sky-mood-head small,
body[data-sky-mood="night"] .profile-view .sky-mood-head>span,
body[data-sky-mood="night"] .profile-view .sky-mood-options button small,
body[data-sky-mood="night"] .profile-view .settings-list i{
  color:rgba(255,255,255,.76)!important;
  text-shadow:0 1px 7px rgba(4,20,43,.3)!important;
}

/* iPhone renders the Home Indicator area from the PWA theme color rather than
   from the page image. Blend the live sky toward the same slate-gray value so
   the system strip and the photographic background meet without a hard seam. */
@media(max-width:430px){
  html,body{background-color:#707b8e!important}
  body[data-sky-mood="night"] .depth-scene{
    filter:saturate(.78) brightness(1.055) contrast(.93)!important;
  }
  body[data-sky-mood="night"] .depth-scene::after{
    content:""!important;
    display:block!important;
    position:absolute;
    z-index:3;
    inset:0;
    pointer-events:none;
    background:
      linear-gradient(180deg,rgba(116,124,143,.055),rgba(132,132,148,.13) 62%,rgba(126,122,137,.19));
  }
}

/* Dialogs live outside .app, so give every profile/settings sheet its own
   light-on-dark type palette instead of inheriting the legacy navy ink. */
dialog,dialog form{
  color:rgba(255,255,255,.92)!important;
  text-shadow:0 1px 7px rgba(2,18,43,.3)!important;
}
dialog h2,dialog h3,dialog strong,dialog label,
dialog .memory-status strong,dialog .memory-toggle strong,
dialog .memory-scope div,dialog .habit-manager-copy strong,
dialog .sound-presets strong,dialog .upload-music strong{
  color:rgba(255,255,255,.96)!important;
  text-shadow:0 1px 8px rgba(2,18,43,.34)!important;
}
dialog p,dialog small,dialog form>small,
dialog .memory-status p,dialog .memory-scope small,
dialog .memory-toggle small,dialog .memory-help,
dialog .habit-manager-copy small,dialog .music-intro,
dialog .music-note,dialog .music-feedback,
dialog .volume-control,dialog .volume-control output,
dialog .upload-music small{
  color:rgba(255,255,255,.7)!important;
  text-shadow:0 1px 6px rgba(2,18,43,.28)!important;
}
dialog button:not(.danger-btn),dialog .secondary-btn,
dialog .habit-manager-item,dialog .sound-presets button{
  color:rgba(255,255,255,.92)!important;
  text-shadow:0 1px 7px rgba(2,18,43,.3)!important;
}
dialog .habit-manager-summary,
dialog .habit-manager-summary span,
dialog .habit-manager-empty,
dialog .habit-manager-empty *{
  color:rgba(255,255,255,.72)!important;
  text-shadow:0 1px 7px rgba(2,18,43,.32)!important;
}
dialog .habit-manager-summary strong{
  color:#fff!important;
  text-shadow:0 1px 8px rgba(2,18,43,.36)!important;
}
dialog input,dialog textarea,dialog select{
  color:rgba(255,255,255,.94)!important;
  caret-color:#fff!important;
}
dialog input::placeholder,dialog textarea::placeholder{
  color:rgba(255,255,255,.5)!important;
}
dialog .close{
  color:rgba(255,255,255,.9)!important;
  text-shadow:0 1px 8px rgba(2,18,43,.34)!important;
  outline:0!important;
  box-shadow:none!important;
}
dialog .danger-btn{
  color:rgba(255,178,184,.94)!important;
  text-shadow:0 1px 7px rgba(54,8,19,.28)!important;
}

/* Star-through glass for both AI conversations: preserve a bright edge while
   allowing the environmental stars to remain crisp behind every surface. */
.companion-view{
  border-color:rgba(255,255,255,.44)!important;
  background:
    radial-gradient(ellipse at 18% 0%,rgba(255,255,255,.065),transparent 35%),
    linear-gradient(180deg,rgba(255,255,255,.035),rgba(221,239,251,.008))!important;
  -webkit-backdrop-filter:blur(1.5px) saturate(1.04)!important;
  backdrop-filter:blur(1.5px) saturate(1.04)!important;
  box-shadow:inset 0 1px 2px rgba(255,255,255,.66),inset 0 -1px 2px rgba(174,216,241,.12),0 10px 24px rgba(32,61,93,.035)!important;
}
.companion-view .chat-bubble,.habit-companion-view .chat-bubble{
  border-color:rgba(255,255,255,.4)!important;
  background:linear-gradient(145deg,rgba(255,255,255,.045),rgba(218,238,251,.008))!important;
  -webkit-backdrop-filter:blur(1px) saturate(1.03)!important;
  backdrop-filter:blur(1px) saturate(1.03)!important;
  box-shadow:inset 0 1px 2px rgba(255,255,255,.52),0 5px 13px rgba(35,65,98,.025)!important;
}
.companion-view .chat-message.user .chat-bubble,.habit-companion-view .chat-message.user .chat-bubble{
  background:linear-gradient(145deg,rgba(214,238,253,.065),rgba(255,255,255,.012))!important;
}
.companion-view .ai-composer,.habit-companion-view .ai-composer{
  border-color:rgba(255,255,255,.46)!important;
  background:linear-gradient(155deg,rgba(255,255,255,.045),rgba(226,242,252,.006))!important;
  -webkit-backdrop-filter:blur(1.5px) saturate(1.04)!important;
  backdrop-filter:blur(1.5px) saturate(1.04)!important;
  box-shadow:inset 0 1px 2px rgba(255,255,255,.58),0 6px 15px rgba(35,65,98,.025)!important;
}
.companion-view .ai-prompts button,.habit-companion-view .ai-prompts button{
  border-color:rgba(255,255,255,.38)!important;
  background:rgba(255,255,255,.025)!important;
  -webkit-backdrop-filter:blur(1px)!important;backdrop-filter:blur(1px)!important;
}