:root{
  --g:#00ff9c; --b:#00b3ff; --bg:#000;
  --tab-h:64px;
  --sat:env(safe-area-inset-top,0px); --sab:env(safe-area-inset-bottom,0px);
  --sal:env(safe-area-inset-left,0px); --sar:env(safe-area-inset-right,0px);
  --ease:cubic-bezier(.22,.8,.2,1);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:#000;color:#d9fff1;overflow:hidden;overscroll-behavior:none;
  font-family:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;-webkit-text-size-adjust:100%}
body{position:fixed;inset:0;height:100dvh;touch-action:manipulation;-webkit-user-select:none;user-select:none}
#stage{position:absolute;left:0;right:0;top:0;bottom:calc(var(--tab-h) + var(--sab));overflow:hidden;background:#000}

/* ---------- views + transitions ---------- */
.view{position:absolute;inset:0;opacity:0;visibility:hidden;pointer-events:none;
  transform:translate3d(var(--from,6%),0,0) scale(.985);
  transition:opacity .38s var(--ease),transform .45s var(--ease),visibility 0s linear .45s,filter .45s var(--ease);
  filter:blur(6px);will-change:transform,opacity}
.view.is-active{opacity:1;visibility:visible;pointer-events:auto;transform:none;filter:none;
  transition:opacity .38s var(--ease),transform .45s var(--ease),visibility 0s,filter .45s var(--ease)}
.view.leave-left{--from:-6%}
.view-app{padding-top:var(--sat);background:#000}
.view-app iframe{display:block;width:100%;height:100%;border:0;background:#000;color-scheme:dark}

/* ---------- home ---------- */
#matrix{position:absolute;inset:0;width:100%;height:100%;opacity:.42}
.home-glow{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(70% 45% at 50% 18%,rgba(0,255,156,.18),transparent 70%),
             radial-gradient(60% 40% at 50% 100%,rgba(0,140,255,.22),transparent 70%),
             linear-gradient(to bottom,rgba(0,0,0,.2),rgba(0,0,0,.75) 60%,#000)}
.scanlines{position:absolute;inset:0;pointer-events:none;z-index:3;
  background:repeating-linear-gradient(0deg,rgba(255,255,255,.03) 0 1px,transparent 1px 3px)}
.scanlines::after{content:"";position:absolute;left:0;right:0;height:140px;top:-140px;
  background:linear-gradient(to bottom,transparent,rgba(0,255,156,.07),transparent);animation:sweep 7s linear infinite}
@keyframes sweep{to{top:100%}}
.home-scroll{position:absolute;inset:0;z-index:2;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  padding:calc(var(--sat) + 18px) calc(var(--sar) + 18px) 28px calc(var(--sal) + 18px)}
.hero{text-align:center;padding:6px 0 10px}
.mask-wrap{position:relative;width:min(220px,52vw);aspect-ratio:1;margin:0 auto}
.hero-mask{position:relative;z-index:2;width:100%;height:100%;object-fit:contain;
  filter:drop-shadow(0 0 16px rgba(0,255,156,.65)) drop-shadow(0 0 42px rgba(0,140,255,.5));animation:float 6s ease-in-out infinite}
@keyframes float{50%{transform:translateY(-8px)}}
.ring{position:absolute;inset:6%;border-radius:50%;border:1px solid rgba(0,255,156,.35);box-shadow:0 0 22px rgba(0,255,156,.25),inset 0 0 22px rgba(0,179,255,.18)}
.ring.r1{animation:pulse 4s ease-out infinite}
.ring.r2{inset:-4%;border-color:rgba(0,179,255,.28);animation:pulse 4s ease-out 2s infinite}
@keyframes pulse{0%{transform:scale(.85);opacity:0}30%{opacity:1}100%{transform:scale(1.18);opacity:0}}
h1.glitch{position:relative;margin:10px 0 4px;font-size:clamp(28px,8.5vw,46px);letter-spacing:.14em;font-weight:800;color:var(--g);
  text-shadow:0 0 6px var(--g),0 0 22px rgba(0,255,156,.65),0 0 46px rgba(0,179,255,.45)}
h1.glitch span{color:var(--b);text-shadow:0 0 6px var(--b),0 0 24px rgba(0,179,255,.75)}
h1.glitch::before,h1.glitch::after{content:attr(data-text);position:absolute;inset:0;opacity:.7;pointer-events:none}
h1.glitch::before{color:var(--b);clip-path:inset(0 0 60% 0);animation:gl1 5s infinite steps(1)}
h1.glitch::after{color:var(--g);clip-path:inset(55% 0 0 0);animation:gl2 5s infinite steps(1)}
@keyframes gl1{0%,92%,100%{transform:none;opacity:0}93%{transform:translate(-3px,-1px);opacity:.8}95%{transform:translate(3px,1px)}97%{transform:translate(-1px,0)}}
@keyframes gl2{0%,90%,100%{transform:none;opacity:0}91%{transform:translate(3px,1px);opacity:.8}94%{transform:translate(-3px,0)}96%{transform:translate(2px,-1px)}}
.tag{margin:0 0 18px;min-height:1.4em;font-size:13px;letter-spacing:.06em;color:#8df2cf}
.cursor{color:var(--b)} .caret{animation:blink 1s steps(1) infinite;color:var(--g)} @keyframes blink{50%{opacity:0}}

.cards{display:grid;gap:16px;max-width:880px;margin:0 auto;grid-template-columns:1fr}
@media (min-width:760px){.cards{grid-template-columns:1fr 1fr}.card-shell{grid-column:1/-1}}
.card{position:relative;padding:16px;border-radius:20px;overflow:hidden;
  background:linear-gradient(155deg,rgba(0,34,22,.78),rgba(0,10,26,.82));
  border:1px solid rgba(0,255,156,.28);box-shadow:inset 0 0 0 1px rgba(0,179,255,.1),0 0 26px rgba(0,255,156,.12),0 10px 40px rgba(0,0,0,.6);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);animation:rise .7s var(--ease) both}
.card:nth-child(2){animation-delay:.08s}.card:nth-child(3){animation-delay:.16s}
@keyframes rise{from{opacity:0;transform:translateY(16px)}}
.card::before{content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;padding:1px;
  background:linear-gradient(120deg,transparent 30%,rgba(0,255,156,.7),rgba(0,179,255,.7),transparent 70%) 0 0/250% 100%;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
  animation:sheen 6s linear infinite}
@keyframes sheen{to{background-position:-250% 0}}
.card-top{display:flex;align-items:center;gap:12px}
.app-ico{width:54px;height:54px;border-radius:14px;box-shadow:0 0 0 1px rgba(0,255,156,.4),0 0 18px rgba(0,255,156,.35)}
.card-title{flex:1;min-width:0}
.card h2{margin:0;font-size:20px;color:#eafff6;letter-spacing:.04em}
.card-title p{margin:2px 0 0;font-size:12px;color:#7fd8c0}
.desc{margin:12px 0 14px;font-size:13.5px;line-height:1.5;color:#b9e9da;-webkit-user-select:text;user-select:text}
.status{display:inline-flex;align-items:center;gap:6px;font-size:11px;color:#7aa;padding:4px 8px;border-radius:99px;border:1px solid rgba(255,255,255,.1)}
.status i{width:8px;height:8px;border-radius:50%;background:#556}
.status.on i{background:var(--g);box-shadow:0 0 10px var(--g)} .status.on{color:var(--g);border-color:rgba(0,255,156,.35)}
.status.off i{background:#ff3b6b;box-shadow:0 0 10px #ff3b6b} .status.off{color:#ff8aa5}
.actions{display:flex;gap:10px;flex-wrap:wrap}
.btn{appearance:none;border:0;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;padding:0 18px;border-radius:12px;font:700 14px/1 inherit;font-family:inherit;letter-spacing:.12em;text-transform:uppercase;transition:transform .12s,filter .2s,box-shadow .2s}
.btn:active{transform:scale(.97)}
.btn.primary{flex:1;color:#00140c;background:linear-gradient(90deg,var(--g),var(--b));box-shadow:0 0 16px rgba(0,255,156,.5),0 0 34px rgba(0,179,255,.3)}
.btn.ghost{color:var(--g);background:rgba(0,255,156,.06);border:1px solid rgba(0,255,156,.35);font-size:12px}
.install{margin-top:12px;border-top:1px dashed rgba(0,255,156,.2);padding-top:10px;font-size:13px;color:#a8dccd}
.install summary{cursor:pointer;color:var(--b);letter-spacing:.06em;list-style:none;display:flex;align-items:center;gap:8px}
.install summary::before{content:"▸";color:var(--g);transition:transform .2s}
.install[open] summary::before{transform:rotate(90deg)}
.install summary::-webkit-details-marker{display:none}
.install ol{margin:10px 0 0;padding-left:20px;line-height:1.6}
.install b{color:#eafff6}
.mono{color:var(--g);word-break:break-all}
.ico-share{display:inline-block;width:14px;height:16px;vertical-align:-2px;border:1.6px solid var(--b);border-top:0;border-radius:0 0 3px 3px;position:relative;margin:0 2px}
.ico-share::before{content:"";position:absolute;left:50%;top:-6px;width:1.6px;height:12px;background:var(--b);transform:translateX(-50%)}
.ico-share::after{content:"";position:absolute;left:50%;top:-7px;width:6px;height:6px;border-left:1.6px solid var(--b);border-top:1.6px solid var(--b);transform:translateX(-50%) rotate(45deg)}
.foot{text-align:center;margin:26px 0 6px;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:#3f8f78}

/* ---------- loader / fallback ---------- */
.loader,.fallback{position:absolute;inset:var(--sat) 0 0 0;z-index:5;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;
  background:radial-gradient(50% 40% at 50% 45%,rgba(0,255,156,.12),transparent 70%),#000;transition:opacity .4s var(--ease),visibility 0s .4s;text-align:center;padding:24px}
.loader.done{opacity:0;visibility:hidden;pointer-events:none}
.loader p{margin:0;font-size:13px;letter-spacing:.14em;color:#8df2cf}
.loader b{color:var(--g)}
.spinner{width:58px;height:58px;border-radius:50%;border:2px solid rgba(0,255,156,.15);border-top-color:var(--g);border-right-color:var(--b);
  box-shadow:0 0 22px rgba(0,255,156,.35);animation:spin .9s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.fallback[hidden]{display:none}
.fallback p{margin:0;color:#a8dccd;font-size:14px}
.fb-title{font-size:18px!important;color:#ff8aa5!important;letter-spacing:.06em}
.fallback .actions{width:min(360px,100%);flex-direction:column}

/* ---------- tab bar ---------- */
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:20;height:calc(var(--tab-h) + var(--sab));
  padding:0 calc(var(--sar) + 10px) var(--sab) calc(var(--sal) + 10px);display:grid;grid-template-columns:repeat(3,1fr);
  background:linear-gradient(to bottom,rgba(2,10,8,.88),rgba(0,0,0,.96));-webkit-backdrop-filter:blur(18px) saturate(140%);backdrop-filter:blur(18px) saturate(140%);
  border-top:1px solid rgba(0,255,156,.22);box-shadow:0 -1px 24px rgba(0,255,156,.12)}
.tabbar::before{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;background:linear-gradient(90deg,transparent,var(--g),var(--b),transparent);opacity:.8}
.tab{position:relative;z-index:2;appearance:none;border:0;background:none;color:#6fa597;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  font:600 10.5px/1 inherit;font-family:inherit;letter-spacing:.08em;cursor:pointer;transition:color .3s,transform .2s}
.tab:active{transform:scale(.92)}
.tab svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.tab img{width:26px;height:26px;border-radius:8px;opacity:.6;filter:grayscale(.5);transition:opacity .3s,filter .3s,box-shadow .3s}
.tab.is-active{color:var(--g);text-shadow:0 0 10px rgba(0,255,156,.7)}
.tab.is-active svg{filter:drop-shadow(0 0 6px var(--g))}
.tab.is-active img{opacity:1;filter:none;box-shadow:0 0 0 1px rgba(0,255,156,.5),0 0 14px rgba(0,255,156,.55)}
.tab-indicator{position:absolute;z-index:1;top:7px;height:calc(var(--tab-h) - 14px);left:calc(var(--sal) + 10px);
  width:calc((100% - var(--sal) - var(--sar) - 20px)/3);border-radius:16px;
  background:radial-gradient(80% 90% at 50% 100%,rgba(0,255,156,.2),rgba(0,179,255,.08) 60%,transparent);
  border:1px solid rgba(0,255,156,.25);box-shadow:inset 0 0 14px rgba(0,179,255,.12);
  transform:translateX(calc(var(--i,0) * 100%));transition:transform .45s var(--ease)}
.tab-indicator::after{content:"";position:absolute;left:30%;right:30%;bottom:-1px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--g),var(--b));box-shadow:0 0 10px var(--g)}

.toast{position:fixed;left:50%;bottom:calc(var(--tab-h) + var(--sab) + 14px);z-index:30;transform:translate(-50%,20px);opacity:0;pointer-events:none;
  padding:10px 16px;border-radius:12px;font-size:12.5px;letter-spacing:.05em;color:#dffff3;background:rgba(0,20,14,.92);border:1px solid rgba(0,255,156,.35);
  box-shadow:0 0 18px rgba(0,255,156,.25);transition:opacity .25s,transform .25s var(--ease)}
.toast.show{opacity:1;transform:translate(-50%,0)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition-duration:.01s!important}
}