:root{
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:#eff8ff;background:#020711;color-scheme:dark;
  --blue:#1687ff;--cyan:#57d9ff;--line:#14345a;--panel:#07111f;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:#020711}
body{
  min-height:100vh;
  background:
    radial-gradient(circle at 50% -10%,rgba(0,117,255,.28),transparent 32%),
    radial-gradient(circle at 15% 50%,rgba(0,99,255,.10),transparent 36%),
    linear-gradient(180deg,#020712 0%,#02050a 100%);
  color:#eef7ff;overflow-x:hidden;
}
button,input{font:inherit}
button{color:inherit}
.app-shell{min-height:100dvh;max-width:680px;margin:0 auto;padding:env(safe-area-inset-top) 18px calc(86px + env(safe-area-inset-bottom))}
.topbar{
  display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
  padding:18px 4px 10px;position:sticky;top:0;z-index:10;
  background:linear-gradient(180deg,rgba(2,7,17,.96),rgba(2,7,17,.82),transparent);
  backdrop-filter:blur(14px);
}
.brand{font-size:22px;letter-spacing:.34em;font-weight:650;text-shadow:0 0 18px rgba(41,154,255,.55)}
.tagline{font-size:12px;color:#84a2bf;margin-top:3px}
.mode-badge{
  font-size:9px;letter-spacing:.12em;padding:7px 9px;border:1px solid #1a4777;border-radius:999px;
  color:#7ec7ff;background:rgba(5,25,48,.7);white-space:nowrap
}
.view{display:none;animation:fade .22s ease}
.view.active{display:block}
@keyframes fade{from{opacity:.2;transform:translateY(4px)}to{opacity:1;transform:none}}
.orb-wrap{display:flex;flex-direction:column;align-items:center;padding:24px 0 12px}
.orb{
  width:min(72vw,330px);aspect-ratio:1;border-radius:50%;position:relative;
  background:
    radial-gradient(circle at 58% 38%,rgba(255,255,255,.95) 0 1%,transparent 7%),
    radial-gradient(circle at 52% 46%,#0756bb 0 16%,#031b48 43%,#020611 72%);
  box-shadow:
    0 0 24px rgba(66,190,255,.95),
    0 0 70px rgba(0,105,255,.56),
    inset 0 0 44px rgba(61,201,255,.42);
  transition:transform .28s ease,filter .28s ease;
  isolation:isolate;
}
.orb::before{
  content:"";position:absolute;inset:-11%;border-radius:50%;
  background:conic-gradient(from 20deg,transparent 0 14%,rgba(88,220,255,.7) 15%,transparent 18% 53%,rgba(43,134,255,.65) 54%,transparent 59% 100%);
  filter:blur(1px);animation:spin 8s linear infinite;z-index:-2
}
.orb::after{
  content:"";position:absolute;inset:5%;border-radius:50%;
  border:2px solid rgba(104,224,255,.7);transform:rotate(-18deg) scaleY(.44);
  box-shadow:0 0 18px rgba(64,199,255,.9);animation:orbit 5.4s ease-in-out infinite
}
.ring{position:absolute;left:50%;top:50%;border:1px solid rgba(55,167,255,.42);border-radius:50%;transform:translate(-50%,-50%)}
.ring-a{width:118%;height:58%;animation:spinTilt 7s linear infinite}
.ring-b{width:130%;height:86%;animation:spinTiltReverse 11s linear infinite}
.ring-c{width:108%;height:108%;border-color:rgba(40,126,255,.18);animation:pulseRing 3.2s ease-in-out infinite}
.core-glow{position:absolute;inset:25%;border-radius:50%;background:rgba(64,187,255,.12);filter:blur(20px)}
.orb.listening{animation:breathe 1.15s ease-in-out infinite;filter:saturate(1.25)}
.orb.thinking{animation:thinkPulse .75s ease-in-out infinite;filter:brightness(1.16) saturate(1.32)}
.orb.speaking{animation:speakPulse .52s ease-in-out infinite;filter:brightness(1.28)}
.orb-state{margin:24px 0 0;color:#a9c9e7;font-size:18px;letter-spacing:.02em}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes orbit{0%,100%{transform:rotate(-18deg) scaleY(.44) scaleX(.92)}50%{transform:rotate(12deg) scaleY(.55) scaleX(1.02)}}
@keyframes spinTilt{to{transform:translate(-50%,-50%) rotate(360deg)}}
@keyframes spinTiltReverse{to{transform:translate(-50%,-50%) rotate(-360deg)}}
@keyframes pulseRing{0%,100%{opacity:.35;transform:translate(-50%,-50%) scale(.95)}50%{opacity:.9;transform:translate(-50%,-50%) scale(1.06)}}
@keyframes breathe{50%{transform:scale(1.025);box-shadow:0 0 38px rgba(76,218,255,1),0 0 92px rgba(0,105,255,.7),inset 0 0 52px rgba(61,201,255,.5)}}
@keyframes thinkPulse{50%{transform:scale(1.035) rotate(.3deg)}}
@keyframes speakPulse{0%,100%{transform:scale(1)}35%{transform:scale(1.03)}70%{transform:scale(.992)}}
.conversation{
  background:linear-gradient(180deg,rgba(8,18,33,.88),rgba(4,11,21,.94));
  border:1px solid rgba(49,133,211,.38);border-radius:26px;padding:14px;
  box-shadow:0 16px 48px rgba(0,0,0,.32),inset 0 0 24px rgba(17,103,194,.07)
}
.thread{min-height:128px;max-height:220px;overflow:auto;padding:4px 2px 12px;display:flex;flex-direction:column;gap:9px}
.message{max-width:82%;padding:11px 14px;border-radius:18px;line-height:1.35;font-size:15px}
.message.futur{align-self:flex-start;background:#0b1b2f;border:1px solid #173f69}
.message.user{align-self:flex-end;background:linear-gradient(135deg,#095fc5,#0b82f3);border:1px solid #3fb9ff}
.system-note{font-size:11px;color:#66839f;padding:0 4px}
.composer{display:grid;grid-template-columns:46px 1fr 46px;gap:10px;align-items:center}
.composer input{
  width:100%;height:48px;border-radius:18px;border:1px solid #1b568d;background:#04101e;color:#f5fbff;
  outline:none;padding:0 15px;box-shadow:inset 0 0 20px rgba(0,86,170,.08)
}
.composer input:focus{border-color:#2ea7ff;box-shadow:0 0 0 3px rgba(27,137,255,.12)}
.composer button{
  height:46px;border:0;border-radius:50%;background:linear-gradient(135deg,#46d7ff,#137dff);
  box-shadow:0 0 20px rgba(33,164,255,.5);font-size:20px;cursor:pointer
}
.page-title{display:flex;justify-content:space-between;align-items:end;margin:26px 4px 16px}
.page-title span{font-size:28px;font-weight:700}
.page-title small{color:#66839f}
.stack{display:flex;flex-direction:column;gap:10px}
.row-card,.proof-card{
  padding:17px 18px;border-radius:20px;border:1px solid #15385e;background:linear-gradient(180deg,#081523,#050e18);
  box-shadow:0 10px 28px rgba(0,0,0,.22)
}
.row-card{display:flex;align-items:center;justify-content:space-between;gap:14px}
.row-card .left{display:flex;align-items:center;gap:12px}
.icon{
  width:42px;height:42px;border-radius:14px;display:grid;place-items:center;
  background:linear-gradient(145deg,#0c55a9,#0c83e8);box-shadow:0 0 16px rgba(39,145,255,.25)
}
.row-card strong{display:block}
.row-card small{color:#7290ab}
.row-card .chev{color:#4b9ee8}
.proof-card{margin-bottom:12px}
.proof-label{font-size:10px;letter-spacing:.14em;color:#4db7ff}
.proof-card strong{display:block;margin:8px 0 6px}
.proof-card p{color:#7895af;margin:0;line-height:1.45;font-size:13px}
.bottom-nav{
  position:fixed;left:50%;bottom:0;transform:translateX(-50%);z-index:20;width:min(100%,680px);
  display:grid;grid-template-columns:repeat(4,1fr);padding:9px 12px calc(9px + env(safe-area-inset-bottom));
  background:rgba(2,8,16,.94);border-top:1px solid #123356;backdrop-filter:blur(18px)
}
.nav-item{
  border:0;background:none;color:#7190ad;font-size:10px;display:flex;flex-direction:column;align-items:center;gap:5px;padding:6px 2px;cursor:pointer
}
.nav-item span{font-size:19px}
.nav-item.active{color:#64c9ff;text-shadow:0 0 12px rgba(55,174,255,.6)}
.nav-item.active::after{content:"";width:28px;height:2px;border-radius:2px;background:#3cbaff;box-shadow:0 0 10px #3cbaff}
@media (min-width:700px){
  body{padding:20px 0}
  .app-shell{border:1px solid #113b66;border-radius:36px;min-height:calc(100dvh - 40px);overflow:hidden;box-shadow:0 0 70px rgba(0,111,255,.15)}
}
@media (max-height:720px){
  .orb{width:min(52vw,240px)}
  .orb-wrap{padding-top:8px}
  .orb-state{margin-top:12px}
  .thread{min-height:82px;max-height:150px}
}

.hidden{display:none!important}
.lock-screen{
  position:fixed;inset:0;z-index:999;display:grid;place-items:center;padding:24px;
  background:
    radial-gradient(circle at 50% 20%,rgba(0,112,255,.28),transparent 28%),
    linear-gradient(180deg,#020711,#02050a);
}
.lock-card{
  width:min(92vw,430px);padding:30px 24px 24px;border-radius:28px;
  border:1px solid #174978;background:rgba(4,14,28,.94);
  box-shadow:0 24px 80px rgba(0,0,0,.55),0 0 42px rgba(0,119,255,.14);
  text-align:center;
}
.lock-card h1{letter-spacing:.34em;margin:16px 0 8px;font-size:24px}
.lock-card p{color:#8dafcd;line-height:1.45}
.mini-orb{
  width:84px;height:84px;border-radius:50%;margin:0 auto;
  background:radial-gradient(circle at 55% 40%,#bff4ff 0 3%,#148fff 20%,#06295f 58%,#020711 75%);
  box-shadow:0 0 20px #48c8ff,0 0 52px rgba(0,114,255,.6);
}
.setup-box{display:grid;gap:10px;margin-top:18px}
.setup-box input{
  height:48px;border-radius:16px;border:1px solid #1c568d;background:#04101e;color:#fff;
  padding:0 14px;outline:none;text-align:center;letter-spacing:.05em
}
.lock-card button{
  min-height:46px;border:0;border-radius:16px;padding:0 16px;
  background:linear-gradient(135deg,#45d8ff,#157cff);font-weight:700;
  box-shadow:0 0 18px rgba(38,157,255,.35);cursor:pointer
}
#unlockBtn{width:100%;margin-top:16px}
.lock-hint{font-size:11px;margin:14px 0 0}
.protected{transition:filter .2s ease,opacity .2s ease}
.mic-btn{font-size:17px!important;background:linear-gradient(145deg,#0a2e58,#0e65b7)!important}
.slider-row{display:grid;grid-template-columns:1fr auto;align-items:center;gap:14px;margin:12px 0}
.slider-row input{width:100%;accent-color:#2aa9ff}