:root{
      --bg:#070d1f;--card:#0b1328;--text:#eef2ff;--muted:#9aa4b2;
      --bdr:rgba(148,163,184,.16);
    }
    html,body{
      background:var(--bg);color:var(--text);
      font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial;
      margin:0;min-height:100vh;display:flex;flex-direction:column;
    }
    .wrap{flex:1;max-width:1200px;margin:0 auto;padding:16px;width:100%}
    .topbar{display:flex;align-items:center;gap:10px;margin-bottom:12px}
    .spacer{flex:1}
    .pill{
      border-radius:999px;
      padding:6px 12px;
      border:1px solid rgba(148,163,184,.25);
      font-size:.8rem;
    }
    .btn{
      border:1px solid var(--bdr);
      background:rgba(148,163,184,.08);
      color:var(--text);
      padding:8px 12px;
      border-radius:10px;
      cursor:pointer;
      font-size:.85rem;
    }
    .btn.ghost{background:transparent}
    .btn.app{
      padding:6px 10px;
      font-size:.8rem;
      opacity:.9;
    }
    .btn.install{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:10px;
      min-height:42px;
      padding:10px 14px;
      border-color:rgba(96,165,250,.45);
      background:linear-gradient(135deg,rgba(96,165,250,.22),rgba(56,189,248,.14));
      box-shadow:0 8px 22px rgba(15,23,42,.28);
    }
    .btn.install:hover{
      border-color:rgba(125,211,252,.7);
      box-shadow:0 10px 26px rgba(2,132,199,.22);
    }
    .btn.install[hidden]{
      display:none;
    }
    .install-icon{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      width:20px;
      height:20px;
      font-size:1rem;
      line-height:1;
    }
    .install-panel{
      position:relative;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:16px;
      margin-top:16px;
      padding:14px 16px;
      border:1px solid rgba(96,165,250,.18);
      border-radius:14px;
      background:linear-gradient(135deg,rgba(96,165,250,.10),rgba(14,165,233,.06));
    }
    .install-panel.is-collapsed{
      align-items:center;
      gap:12px;
      padding-right:56px;
      cursor:pointer;
    }
    .install-panel.is-collapsed .install-copy{
      display:flex;
      align-items:center;
      gap:8px;
    }
    .install-panel.is-collapsed .install-label{
      margin:0;
    }
    .install-panel.is-collapsed .install-title,
    .install-panel.is-collapsed .install-note,
    .install-panel.is-collapsed .btn.install{
      display:none;
    }
    .install-copy{
      min-width:0;
    }
    .install-toggle{
      position:absolute;
      top:10px;
      right:10px;
      width:30px;
      height:30px;
      padding:0;
      border-radius:999px;
      border:1px solid rgba(148,163,184,.22);
      background:rgba(15,23,42,.32);
      color:#cbd5e1;
      font-size:1rem;
      line-height:1;
    }
    .install-toggle:hover{
      border-color:rgba(125,211,252,.45);
      color:#eef2ff;
      background:rgba(15,23,42,.48);
    }
    .install-label{
      display:block;
      margin:0 0 4px;
      font-size:.74rem;
      font-weight:700;
      letter-spacing:.08em;
      text-transform:uppercase;
      color:#7dd3fc;
    }
    .install-title{
      margin:0;
      font-size:.98rem;
      font-weight:700;
      color:#eef2ff;
    }
    .install-note{
      margin:4px 0 0;
      color:#94a3b8;
      font-size:.84rem;
      line-height:1.45;
    }
    .install-note[hidden]{
      display:none;
    }

    .card{border:1px solid var(--bdr);background:rgba(148,163,184,.06);border-radius:14px}
    .hero{padding:18px 20px;margin-bottom:14px}
    h1{margin:0 0 6px}
    .subtitle{color:#94a3b8;margin:0}
    .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}
    .tile{
      display:flex;flex-direction:column;gap:8px;text-decoration:none;color:inherit;
      border:1px solid var(--bdr);border-radius:14px;padding:16px;
      background:linear-gradient(180deg,rgba(148,163,184,.06),rgba(148,163,184,.03));
      transition:transform .08s ease, box-shadow .08s ease, border-color .08s ease;
      opacity:0; transform:translateY(12px) scale(.98);
      will-change: transform, opacity;
    }
    .tile:hover{
      transform:translateY(-1px);
      box-shadow:0 6px 20px rgba(0,0,0,.18);
      border-color:rgba(148,163,184,.28)
    }
    .tile h3{margin:0;font-size:1.05rem}
    .tile p{margin:0;color:#94a3b8;font-size:.92rem;min-height:40px}
    .section{margin-top:18px}
    .section h2{margin:0 0 8px;font-size:1.05rem;color:#9aa4b2}
    .muted{color:#94a3b8}
    footer{
      border-top:1px solid var(--bdr);
      padding:10px 16px;
      text-align:center;
      font-size:.85rem;
      color:var(--muted);
      background:rgba(148,163,184,.04)
    }
    footer a{
      color:var(--muted);
      text-decoration:none;
      margin:0 8px;
      transition:color .15s
    }
    footer a:hover{color:var(--text)}

    @keyframes tileIn {
      to { opacity:1; transform:none; }
    }
    .tile.fx-in {
      animation: tileIn .45s cubic-bezier(.2,.8,.2,1) forwards;
    }

    @media (prefers-reduced-motion: reduce) {
      .tile { opacity:1 !important; transform:none !important; }
      .tile.fx-in { animation:none !important; }
    }
    @media (max-width:760px){
      .topbar{
        flex-wrap:wrap;
      }
      .topbar .spacer{
        display:none;
      }
      .topbar .btn,
      .topbar a.btn{
        flex:1 1 calc(50% - 5px);
        justify-content:center;
      }
      .install-panel{
        align-items:flex-start;
        flex-direction:column;
      }
      .install-panel .btn.install{
        width:100%;
      }
      .install-panel.is-collapsed{
        padding-right:52px;
      }
      .install-panel.is-collapsed .install-copy{
        align-items:flex-start;
        flex-direction:column;
        gap:2px;
      }
    }