:root{
  --bg:#0b1020; --bg2:#121a33; --card:#15203f; --line:#22305a;
  --ink:#eaf0ff; --mut:#8ea2cc; --acc:#22c55e; --acc2:#f59e0b; --bad:#ef4444;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:radial-gradient(1200px 600px at 50% -10%,#16224a,#0b1020 60%);
  color:var(--ink); font:15px/1.5 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  min-height:100dvh; padding-bottom:78px;
}
.top{
  position:sticky; top:0; z-index:10; display:flex; align-items:center; justify-content:space-between;
  padding:14px 16px; padding-top:max(14px,env(safe-area-inset-top));
  background:rgba(11,16,32,.85); backdrop-filter:blur(10px); border-bottom:1px solid var(--line);
}
.brand{display:flex; align-items:center; gap:8px; font-size:18px}
.brand .logo{font-size:22px}
.brand .tag{color:var(--mut); font-size:12px; font-weight:400}
.badge{font-size:12px; padding:5px 10px; border-radius:999px; border:1px solid var(--line)}
.badge.online{color:var(--acc); border-color:#1d4d33; background:#0f2a1c}
.badge.offline{color:var(--acc2); border-color:#4d3a17; background:#2a1f0f}

main{padding:16px; max-width:760px; margin:0 auto}
.view{display:none}
.view.active{display:block; animation:fade .2s ease}
@keyframes fade{from{opacity:0;transform:translateY(4px)}to{opacity:1}}
.lead{color:var(--mut); margin:.2em 0 1em}
h2{margin:.2em 0 .6em}

.filters{display:flex; gap:8px; margin-bottom:14px; flex-wrap:wrap}
.chip{background:var(--card); color:var(--mut); border:1px solid var(--line);
  padding:7px 14px; border-radius:999px; font-size:13px; cursor:pointer}
.chip.active{color:#04140a; background:var(--acc); border-color:var(--acc); font-weight:600}

.grid{display:grid; grid-template-columns:1fr; gap:12px}
@media(min-width:560px){.grid{grid-template-columns:1fr 1fr}}
.skill{background:var(--card); border:1px solid var(--line); border-radius:16px; padding:14px}
.skill .row{display:flex; align-items:flex-start; gap:10px}
.skill .ico{font-size:30px; line-height:1}
.skill h3{margin:0; font-size:16px}
.skill .cat{font-size:11px; color:var(--mut); text-transform:uppercase; letter-spacing:.04em}
.skill .blurb{color:var(--mut); font-size:13.5px; margin:8px 0 10px}
.skill .meta{display:flex; gap:8px; flex-wrap:wrap; font-size:11px; color:var(--mut); margin-bottom:12px}
.skill .meta span{background:#0e1733; border:1px solid var(--line); padding:3px 8px; border-radius:8px}
.skill .meta a{color:var(--mut); text-decoration:none; border-bottom:1px dotted var(--mut)}
.skill .actions{display:flex; gap:8px}

.btn{background:var(--acc); color:#04140a; border:0; border-radius:10px; padding:10px 14px;
  font-weight:600; font-size:14px; cursor:pointer; flex:1}
.btn:disabled{opacity:.6; cursor:default}
.btn.ghost{background:transparent; color:var(--ink); border:1px solid var(--line); font-weight:500}
.btn.sm{padding:8px 12px; font-size:13px; flex:initial}
.installed{color:var(--acc); font-size:13px; font-weight:600; display:flex; align-items:center; gap:6px}

.prog{height:8px; background:#0e1733; border-radius:999px; overflow:hidden; margin:8px 0 4px; display:none}
.prog.show{display:block}
.prog > i{display:block; height:100%; width:0; background:linear-gradient(90deg,var(--acc),#86efac); transition:width .2s}
.progtxt{font-size:11px; color:var(--mut); min-height:14px}

.lbl,.lbl2{display:block; font-size:13px; color:var(--mut); margin:14px 0 6px}
select,textarea,input[type=text]{
  width:100%; background:var(--bg2); color:var(--ink); border:1px solid var(--line);
  border-radius:10px; padding:11px; font:inherit;
}
textarea{min-height:90px; resize:vertical}
#runPanel{margin-top:14px}
.drop{border:1.5px dashed var(--line); border-radius:14px; padding:18px; text-align:center; color:var(--mut); cursor:pointer; background:var(--bg2)}
.preview-wrap{position:relative; margin-top:12px; display:inline-block; max-width:100%}
.preview-wrap img{max-width:100%; border-radius:12px; display:block}
.preview-wrap canvas{position:absolute; left:0; top:0; pointer-events:none}
.result{margin-top:14px; background:var(--card); border:1px solid var(--line); border-radius:14px; padding:14px}
.bar{height:10px; background:#0e1733; border-radius:999px; overflow:hidden; margin:4px 0 10px}
.bar>i{display:block; height:100%; background:var(--acc)}
.kv{display:flex; justify-content:space-between; gap:10px; padding:4px 0; border-bottom:1px solid var(--line)}
.kv:last-child{border:0}
.big{font-size:22px; font-weight:700}
.muted{color:var(--mut)}

.empty{text-align:center; color:var(--mut); padding:40px 10px}
.empty .btn{display:inline-block; flex:initial; margin-top:10px}
.about{color:var(--mut); padding-left:18px} .about li{margin:8px 0}
.about b{color:var(--ink)}
.note,.runtime{color:var(--mut); font-size:12.5px; margin-top:16px; line-height:1.6}

.tabs{position:fixed; bottom:0; left:0; right:0; display:flex; background:rgba(11,16,32,.92);
  backdrop-filter:blur(10px); border-top:1px solid var(--line); padding-bottom:env(safe-area-inset-bottom)}
.tab{flex:1; background:none; border:0; color:var(--mut); padding:12px 0 14px; font-size:12.5px; cursor:pointer}
.tab.active{color:var(--acc)}

.toast{position:fixed; left:50%; bottom:88px; transform:translateX(-50%) translateY(20px);
  background:#0e1733; border:1px solid var(--line); color:var(--ink); padding:10px 16px; border-radius:10px;
  opacity:0; transition:.25s; pointer-events:none; z-index:50; max-width:90%}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0)}
.hidden{display:none}
.top-right{display:flex; align-items:center; gap:8px}
.ibtn{background:var(--acc); color:#04140a; border:0; border-radius:999px; padding:7px 12px;
  font-size:12.5px; font-weight:700; cursor:pointer}
.sheet{position:fixed; inset:0; z-index:60; background:rgba(4,8,20,.6); backdrop-filter:blur(4px);
  display:flex; align-items:flex-end; justify-content:center}
.sheet.hidden{display:none}   /* beats .sheet's display:flex regardless of source order */
.sheet-card{background:var(--bg2); border:1px solid var(--line); border-bottom:0;
  border-radius:18px 18px 0 0; padding:18px; width:100%; max-width:520px; animation:up .25s ease}
@keyframes up{from{transform:translateY(30px);opacity:.5}to{transform:translateY(0);opacity:1}}
.sheet h3{margin:.1em 0 .4em}
.seg{display:flex; gap:8px; margin:12px 0}
.seg button{flex:1; background:var(--card); color:var(--mut); border:1px solid var(--line);
  padding:9px; border-radius:10px; font-weight:600; cursor:pointer}
.seg button.on{background:var(--acc); color:#04140a; border-color:var(--acc)}
.steps{color:var(--mut); padding-left:18px; margin:8px 0} .steps li{margin:7px 0}
.steps b{color:var(--ink)}
.sheet .close{display:block; width:100%; margin-top:12px}
.spin{display:inline-block; width:14px; height:14px; border:2px solid #ffffff55; border-top-color:#fff;
  border-radius:50%; animation:sp 1s linear infinite; vertical-align:-2px}
@keyframes sp{to{transform:rotate(360deg)}}

/* ════════════════════════════════════════════════════════════════════════════
   Motion layer — aurora bg, glass cards, magnetic buttons, view transitions.
   Pairs with anim.js (GSAP + Lenis). All gracefully no-ops without JS.
   ════════════════════════════════════════════════════════════════════════════ */

/* Lenis smooth-scroll plumbing */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}

/* drifting aurora behind everything */
.aurora{position:fixed; inset:-20% -10% auto -10%; height:80vh; z-index:-1; pointer-events:none;
  filter:blur(70px) saturate(140%); opacity:.55;
  background:
    radial-gradient(38% 50% at 18% 22%, #22c55e55, transparent 70%),
    radial-gradient(34% 46% at 82% 18%, #6366f155, transparent 70%),
    radial-gradient(40% 44% at 60% 70%, #f59e0b33, transparent 72%);
  animation:drift 22s ease-in-out infinite alternate}
@keyframes drift{
  0%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(3%,2%,0) scale(1.12)}
  100%{transform:translate3d(-3%,-1%,0) scale(1.05)}}

/* glassy cards with a sweeping edge-glow on hover */
.skill{position:relative; overflow:hidden;
  background:linear-gradient(180deg,#172445d9,#121d3bcc); backdrop-filter:blur(6px);
  transition:transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s, border-color .35s;
  will-change:transform}
.skill::before{content:""; position:absolute; inset:0; border-radius:inherit; padding:1px;
  background:linear-gradient(130deg,#22c55e88,transparent 40%,transparent 60%,#6366f188);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; opacity:0; transition:opacity .35s}
@media(hover:hover) and (pointer:fine){
  .skill:hover{transform:translateY(-4px); border-color:#2c3e72;
    box-shadow:0 18px 40px -22px #000,0 0 0 1px #ffffff0a, 0 10px 30px -20px #22c55e66}
  .skill:hover::before{opacity:1}
}

/* primary button: gradient + light sweep */
.btn{position:relative; overflow:hidden;
  background:linear-gradient(135deg,#27d36a,#16a34a);
  box-shadow:0 8px 22px -12px #22c55eaa; will-change:transform}
.btn::after{content:""; position:absolute; top:0; left:-120%; width:60%; height:100%;
  background:linear-gradient(100deg,transparent,#ffffff66,transparent); transform:skewX(-18deg)}
.btn:hover::after{animation:sweep .7s ease}
@keyframes sweep{to{left:140%}}
.btn.ghost{background:transparent; box-shadow:none}
.btn.ghost::after{display:none}

.chip{transition:transform .25s, background .25s, color .25s, box-shadow .25s; will-change:transform}
.chip.active{box-shadow:0 6px 18px -8px #22c55ecc}

.ibtn{position:relative; overflow:hidden}
.ibtn::after{content:""; position:absolute; inset:0; left:-120%; width:55%;
  background:linear-gradient(100deg,transparent,#ffffff80,transparent); transform:skewX(-18deg);
  animation:sweep 2.6s ease-in-out infinite}

/* download progress: animated sheen on the fill */
.prog>i{position:relative; overflow:hidden}
.prog>i::after{content:""; position:absolute; inset:0;
  background:linear-gradient(100deg,transparent,#ffffff66,transparent);
  transform:translateX(-100%); animation:shine 1.1s linear infinite}
@keyframes shine{to{transform:translateX(100%)}}

/* native View Transitions for tab nav (Store/Run/About) */
@keyframes vt-in{from{opacity:0; transform:translateY(8px) scale(.995)}to{opacity:1}}
@keyframes vt-out{from{opacity:1}to{opacity:0; transform:translateY(-6px) scale(.995)}}
::view-transition-old(root){animation:vt-out .22s ease both}
::view-transition-new(root){animation:vt-in .28s ease both}

@media (prefers-reduced-motion: reduce){
  .aurora{animation:none}
  .ibtn::after,.prog>i::after{animation:none}
  ::view-transition-old(root),::view-transition-new(root){animation:none}
}

/* ════════════════════════════════════════════════════════════════════════════
   Agent (cloud brain) — chat UI
   ════════════════════════════════════════════════════════════════════════════ */
#view-agent{display:none}
#view-agent.active{display:flex; flex-direction:column; min-height:calc(100dvh - 140px)}
.chatlog{flex:1; display:flex; flex-direction:column; gap:14px; padding-bottom:8px}

.msg{display:flex}
.msg.user{justify-content:flex-end}
.msg.bot{flex-direction:column; align-items:flex-start}
.bubble{max-width:86%; padding:11px 14px; border-radius:16px; font-size:14.5px; line-height:1.55;
  border:1px solid var(--line); word-wrap:break-word; overflow-wrap:anywhere}
.msg.user .bubble{background:linear-gradient(135deg,#27d36a,#16a34a); color:#04140a; border:0;
  border-bottom-right-radius:5px; box-shadow:0 8px 22px -14px #22c55eaa}
.msg.bot .bubble{background:linear-gradient(180deg,#172445d9,#121d3bcc); backdrop-filter:blur(6px);
  border-bottom-left-radius:5px}
.bubble.err{background:#2a1320; border-color:#5a2740; color:#ffd7e0}
.bubble code{background:#0e1733; border:1px solid var(--line); border-radius:6px; padding:1px 5px; font-size:.92em}
.bubble .li{display:block; margin:2px 0}

.thinking{display:inline-flex; gap:5px; align-items:center}
.thinking i{width:7px; height:7px; border-radius:50%; background:var(--mut); animation:blink 1.2s infinite both}
.thinking i:nth-child(2){animation-delay:.2s} .thinking i:nth-child(3){animation-delay:.4s}
@keyframes blink{0%,80%,100%{opacity:.3;transform:translateY(0)}40%{opacity:1;transform:translateY(-3px)}}

.steps-box{align-self:flex-start; max-width:86%; margin-bottom:-4px; font-size:12px}
.steps-box summary{color:var(--mut); cursor:pointer; list-style:none; padding:4px 2px}
.steps-box summary::-webkit-details-marker{display:none}
.steps-box[open] summary{color:var(--acc)}
.step{background:#0e1733; border:1px solid var(--line); border-radius:10px; padding:8px 10px; margin:6px 0}
.step-h{color:var(--ink); font-size:12.5px; margin-bottom:4px}
.step-r{color:var(--mut); font-size:11.5px; white-space:pre-wrap; max-height:120px; overflow:auto}

.awelcome{text-align:center; padding:26px 6px 10px; margin:auto 0}
.awelcome .ahero{font-size:54px; line-height:1; filter:drop-shadow(0 8px 24px #22c55e55)}
.awelcome h2{margin:.3em 0 .2em}
.awelcome .muted{max-width:440px; margin:0 auto}
.sgs{display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-top:18px}
.sg{background:var(--card); color:var(--ink); border:1px solid var(--line); border-radius:12px;
  padding:9px 13px; font-size:13px; cursor:pointer; transition:transform .2s, border-color .2s}
@media(hover:hover){.sg:hover{transform:translateY(-2px); border-color:#2c3e72}}

.composer{position:sticky; bottom:calc(72px + env(safe-area-inset-bottom)); display:flex; gap:8px;
  align-items:flex-end; margin-top:10px; padding:8px; border-radius:16px;
  background:rgba(14,23,51,.92); backdrop-filter:blur(10px); border:1px solid var(--line)}
.composer textarea{flex:1; min-height:44px; max-height:140px; resize:none; border-radius:11px;
  background:var(--bg2); border:1px solid var(--line)}
.composer .send{width:44px; height:44px; flex:0 0 44px; border:0; border-radius:50%; cursor:pointer;
  background:linear-gradient(135deg,#27d36a,#16a34a); color:#04140a; font-size:18px; font-weight:700;
  box-shadow:0 8px 22px -12px #22c55eaa}
.composer .send:disabled{opacity:.5; cursor:default}

.agent-head{display:flex; align-items:center; justify-content:space-between; gap:8px;
  margin:-4px 0 10px; font-size:12px}
.chiplink{background:var(--card); color:var(--ink); border:1px solid var(--line);
  border-radius:999px; padding:6px 12px; font-size:12.5px; cursor:pointer}
.chiplink:hover{border-color:#2c3e72}

/* agent-skill catalog sheet */
.sklist{max-height:56vh; overflow:auto; margin:6px 0 4px}
.sk-sep{color:var(--mut); font-size:12px; text-transform:uppercase; letter-spacing:.05em;
  margin:14px 0 8px; border-top:1px solid var(--line); padding-top:12px}
.skrow{background:var(--card); border:1px solid var(--line); border-radius:12px; padding:11px 12px; margin:8px 0}
.skrow.locked{opacity:.72}
.skr-top{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.skr-emoji{font-size:18px}
.skr-top .on{color:var(--acc); font-size:11.5px; margin-left:auto}
.skr-top .off{color:var(--acc2); font-size:11.5px; margin-left:auto}
.skr-desc{color:var(--mut); font-size:12.5px; margin:6px 0 5px}
.skr-src{font-size:11.5px; color:var(--mut)}
.skr-src a{color:var(--acc); text-decoration:none; border-bottom:1px dotted var(--acc)}

/* ── landing: the cool front door ───────────────────────────────────────────── */
.landing{
  position:fixed; inset:0; z-index:60; overflow-y:auto;
  background:
    radial-gradient(900px 500px at 80% -5%, rgba(34,197,94,.16), transparent 60%),
    radial-gradient(800px 500px at 10% 10%, rgba(245,158,11,.12), transparent 55%),
    radial-gradient(1200px 700px at 50% 0%, #16224a, #0b1020 70%);
  display:flex; align-items:center; justify-content:center;
  padding:max(28px,env(safe-area-inset-top)) 20px 40px;
  animation:fade .35s ease;
}
.landing.hidden{display:none}
.lwrap{width:100%; max-width:520px; text-align:center}
.lbadge{
  display:inline-block; font-size:12.5px; color:var(--acc); font-weight:600;
  padding:6px 13px; border-radius:999px; border:1px solid #1d4d33; background:#0f2a1c;
  margin-bottom:18px;
}
.lmascot{
  font-size:74px; line-height:1; filter:drop-shadow(0 10px 24px rgba(34,197,94,.35));
  animation:bob 3.2s ease-in-out infinite;
}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-9px) rotate(2deg)}}
.lwordmark{
  font-size:42px; font-weight:800; letter-spacing:-1px; margin:6px 0 2px;
}
.lwordmark span{color:var(--acc)}
.lhead{
  font-size:25px; line-height:1.25; font-weight:800; letter-spacing:-.4px; margin:.3em 0 .5em;
}
.lhead .grad{
  background:linear-gradient(100deg,#22c55e,#7dd3fc 55%,#f59e0b);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.lsub{color:var(--mut); font-size:15px; line-height:1.6; margin:0 auto 18px; max-width:440px}
.lsub b{color:var(--ink); font-weight:600}
.lchips{display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-bottom:22px}
.lchips span{
  font-size:12.5px; color:var(--ink); background:rgba(255,255,255,.05);
  border:1px solid var(--line); border-radius:999px; padding:7px 13px; backdrop-filter:blur(6px);
}
.lcta{
  display:inline-flex; align-items:center; gap:8px; cursor:pointer;
  font-size:16px; font-weight:700; color:#04140a; border:0; border-radius:14px;
  padding:14px 26px; background:linear-gradient(100deg,#22c55e,#16a34a);
  box-shadow:0 10px 28px rgba(34,197,94,.4); transition:transform .15s ease, box-shadow .15s ease;
}
.lcta:hover{transform:translateY(-2px); box-shadow:0 14px 34px rgba(34,197,94,.5)}
.lcta:active{transform:translateY(0)}

.ldl{margin-top:30px; padding-top:24px; border-top:1px solid var(--line)}
.ldl-label{color:var(--mut); font-size:13px; margin:0 0 12px; font-weight:600}
.ldl-btns{display:flex; gap:12px; justify-content:center; flex-wrap:wrap}
.dlbtn{
  display:inline-flex; align-items:center; gap:11px; cursor:pointer; text-align:left;
  min-width:170px; padding:11px 18px; border-radius:14px; border:1px solid var(--line);
  transition:transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.dlbtn:hover{transform:translateY(-2px)}
.dlbtn .dl-ico{font-size:26px; line-height:1}
.dlbtn .dl-txt{display:flex; flex-direction:column; line-height:1.15}
.dlbtn .dl-txt small{font-size:10.5px; opacity:.7; font-weight:500}
.dlbtn .dl-txt b{font-size:16px; font-weight:700}
/* Android = green-tinted glass */
.dlbtn.android{
  color:var(--ink); background:linear-gradient(160deg, rgba(34,197,94,.16), rgba(34,197,94,.05));
  border-color:#1d4d33;
}
.dlbtn.android:hover{border-color:var(--acc); box-shadow:0 10px 26px rgba(34,197,94,.25)}
/* iOS = clean light slab */
.dlbtn.ios{
  color:#0b1020; background:linear-gradient(160deg,#ffffff,#dbe4f5);
  border-color:#cfd9ef;
}
.dlbtn.ios .dl-txt small{opacity:.55}
.dlbtn.ios:hover{box-shadow:0 10px 26px rgba(219,228,245,.3)}
.lfoot{color:var(--mut); font-size:12px; margin-top:24px}
@media(max-width:380px){.dlbtn{min-width:0; flex:1}}

/* visible keyboard-focus ring (a11y) — only for keyboard nav, not mouse clicks */
.lcta:focus-visible, .dlbtn:focus-visible, .chiplink:focus-visible,
.btn:focus-visible, .sg:focus-visible, .send:focus-visible, .ibtn:focus-visible{
  outline:2px solid #7dd3fc; outline-offset:3px;
}