#chart-splash{position:fixed;inset:0;z-index:99999;display:flex;flex-direction:column;align-items:center;justify-content:center;background:linear-gradient(150deg,#14B8A6 0%,#0E7DC4 55%,#1E3A8A 100%);transition:opacity .6s ease;}
  #chart-splash.hide{opacity:0;pointer-events:none;}
  /* Chart tab empty state - floating ChartSafe mark on the app theme, nav stays usable */
  #chart-empty-state{position:fixed;inset:0;z-index:40;display:flex;flex-direction:column;align-items:center;justify-content:center;background:linear-gradient(135deg,rgba(255,255,255,0.10),rgba(255,255,255,0.03)),rgba(33,35,39,0.15);-webkit-backdrop-filter:blur(18px) saturate(1.8);backdrop-filter:blur(18px) saturate(1.8);box-shadow:inset 0 1px 0 rgba(255,255,255,0.18),inset 0 -1px 0 rgba(0,0,0,0.10);padding:44px 24px calc(96px + var(--safe-bot));}
  :root[data-theme="light"] #chart-empty-state{background:linear-gradient(135deg,rgba(255,255,255,0.45),rgba(255,255,255,0.12)),rgba(228,231,236,0.28);box-shadow:inset 0 1px 0 rgba(255,255,255,0.6),inset 0 -1px 0 rgba(0,0,0,0.05);}
  #chart-empty-state .ces-hint{margin-top:14px;font-size:13px;font-weight:600;color:var(--muted);letter-spacing:.02em;}
  #chart-empty-state.hide{display:none;}
  #chart-empty-state .cs-hero{width:min(62vw,290px);height:auto;display:block;}
  #chart-empty-state .cs-word text{fill:var(--text);font-family:'Sora',system-ui,-apple-system,'Segoe UI',sans-serif;font-weight:800;}
  #chart-empty-state .cs-by{fill:var(--muted);font-family:ui-monospace,'JetBrains Mono',monospace;font-weight:500;}
  #chart-empty-state .cs-spine{stroke:var(--muted);}
  #chart-empty-state .cs-sys polyline,#chart-empty-state .cs-dia polyline{stroke:var(--accent);}
  #chart-empty-state .cs-hr,#chart-empty-state .cs-hrglow{fill:var(--accent);}
  #chart-empty-state .cs-sys{animation:csSys 3s cubic-bezier(.6,0,.2,1) infinite;transform-box:fill-box;transform-origin:center;}
  #chart-empty-state .cs-dia{animation:csDia 3s cubic-bezier(.6,0,.2,1) infinite;transform-box:fill-box;transform-origin:center;}
  #chart-empty-state .cs-hr{animation:csBeat 1.05s ease-in-out infinite;transform-box:fill-box;transform-origin:center;}
  #chart-empty-state .cs-hrglow{animation:csGlow 1.05s ease-in-out infinite;transform-box:fill-box;transform-origin:center;}
  @keyframes cesIn{from{opacity:0;}to{opacity:1;}}
  @keyframes cesFloat{0%,100%{transform:translateY(0);}50%{transform:translateY(-12px);}}
  @keyframes dashInRight{from{opacity:0;transform:translateX(26px);}to{opacity:1;transform:translateX(0);}}
  @keyframes dashInLeft{from{opacity:0;transform:translateX(-26px);}to{opacity:1;transform:translateX(0);}}
  .dash-slide-right{animation:dashInRight .22s ease;}
  .dash-slide-left{animation:dashInLeft .22s ease;}
  /* Motion layer: subtle, responsive feedback (additive) */
  .btn:active{transform:scale(.97);}
  .stt{transition:transform .12s ease, background .15s ease, border-color .15s ease;}
  .stt:active{transform:scale(.985);}
  .bnav-btn{transition:transform .12s ease, color .15s ease;}
  .bnav-btn:active{transform:scale(.92);}
  .qs-pill,.tb,.tg button{transition:background .15s ease, border-color .15s ease, color .15s ease, transform .1s ease;}
  .tb:active,.tg button:active{transform:scale(.96);}
  .app-pane.active{animation:paneIn .26s ease;}
  /* Chart pane holds a fixed overlay; the opacity fade traps it and double-renders it, so skip the fade here */
  #pane-record.app-pane.active{animation:none;}
  @keyframes paneIn{from{opacity:0;}to{opacity:1;}}
  .stt-icon svg{transition:transform .2s ease;}
  .stt:active .stt-icon svg{transform:scale(1.08);}
  #chart-splash .cs-hero{width:min(82vw,430px);height:auto;display:block;margin-bottom:8px;filter:drop-shadow(0 8px 22px rgba(0,0,0,.28));}
  #chart-splash .cs-word text{fill:#fff;font-family:'Sora',system-ui,-apple-system,'Segoe UI',sans-serif;font-weight:800;}
  #chart-splash .cs-by{fill:rgba(255,255,255,.82);font-family:ui-monospace,'JetBrains Mono',monospace;font-weight:500;}
  #chart-splash .cs-sys{animation:csSys 3s cubic-bezier(.6,0,.2,1) infinite;transform-box:fill-box;transform-origin:center;}
  #chart-splash .cs-dia{animation:csDia 3s cubic-bezier(.6,0,.2,1) infinite;transform-box:fill-box;transform-origin:center;}
  #chart-splash .cs-hr{animation:csBeat 1.05s ease-in-out infinite;transform-box:fill-box;transform-origin:center;}
  #chart-splash .cs-hrglow{animation:csGlow 1.05s ease-in-out infinite;transform-box:fill-box;transform-origin:center;}
  #chart-splash .cs-spine{stroke-dasharray:540;stroke-dashoffset:540;animation:csTrace 3s cubic-bezier(.5,0,.2,1) infinite;}
  @keyframes csSys{0%,18%{transform:translateY(0);}50%{transform:translateY(20px);}82%,100%{transform:translateY(0);}}
  @keyframes csDia{0%,18%{transform:translateY(0);}50%{transform:translateY(-20px);}82%,100%{transform:translateY(0);}}
  @keyframes csBeat{0%,100%{transform:scale(1);}12%{transform:scale(1.5);}24%{transform:scale(1.05);}34%{transform:scale(1.28);}46%{transform:scale(1);}}
  @keyframes csGlow{0%,100%{opacity:.3;}12%{opacity:.85;}34%{opacity:.6;}46%{opacity:.35;}}
  @keyframes csTrace{to{stroke-dashoffset:0;}}
  #chart-splash .cs-load{position:absolute;bottom:48px;left:50%;transform:translateX(-50%);width:150px;height:4px;border-radius:99px;background:rgba(255,255,255,.22);overflow:hidden;}
  #chart-splash .cs-load::after{content:"";position:absolute;top:0;height:100%;width:42%;border-radius:99px;background:rgba(255,255,255,.92);animation:csBar 1.25s cubic-bezier(.65,0,.35,1) infinite;}
  @keyframes csBar{0%{left:-42%;}100%{left:100%;}}