:root{
  --bg:#f2f2f7;
  --card:rgba(255,255,255,.78);
  --stroke:rgba(0,0,0,.08);
  --text:rgba(0,0,0,.90);
  --sub:rgba(0,0,0,.58);
  --btn:#111;
  --btnText:#fff;
  --ghost:rgba(0,0,0,.06);
  --shadow:0 22px 60px rgba(0,0,0,.14);
  --radius:26px;
}

@media (prefers-color-scheme: dark){
  :root{
    --bg:#0b0b0d;
    --card:rgba(22,22,24,.84);
    --stroke:rgba(255,255,255,.10);
    --text:rgba(255,255,255,.92);
    --sub:rgba(255,255,255,.62);
    --btn:rgba(255,255,255,.92);
    --btnText:#000;
    --ghost:rgba(255,255,255,.08);
    --shadow:0 22px 70px rgba(0,0,0,.55);
  }
}

html,body{height:100%;}
body{
  margin:0;
  font-family:-apple-system, system-ui, "Helvetica Neue","Hiragino Sans","Noto Sans JP", sans-serif;
  background:
    radial-gradient(1200px 700px at 18% 0%, rgba(180,210,255,.45), transparent 60%),
    radial-gradient(1200px 700px at 82% 0%, rgba(210,180,255,.45), transparent 60%),
    var(--bg);
  background-repeat:no-repeat, no-repeat, no-repeat;
  background-position:top left, top right, top left;
  background-size:100% 720px, 100% 720px, auto;
  color:var(--text);
  display:flex;
  justify-content:center;
  padding:28px 16px;
  box-sizing:border-box;
}

.wrap{width:min(560px, 100%);}

.card{
  background:var(--card);
  border:1px solid var(--stroke);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  overflow:hidden;
}

/* App Store-like top header */
.top{
  display:flex;
  gap:18px;
  padding:22px 20px 18px 20px;
  align-items:center;
}

.appIcon{
  width:76px;
  height:76px;
  border-radius:20px;
  box-shadow: 0 14px 34px rgba(0,0,0,.25);
  border: 1px solid var(--stroke);
  flex:0 0 auto;
  background: rgba(255,255,255,.06);
}

.title{
  margin:0;
  font-size:28px;
  font-weight:800;
  letter-spacing:-0.02em;
  line-height:1.15;
}

.sub{
  margin:8px 0 0 0;
  color:var(--sub);
  font-size:13px;
  line-height:1.55;
}

.divider{height:1px;background:var(--stroke);}

/* Landing content */
.section{padding:16px 20px 20px 20px;}
.label{font-size:12px;color:var(--sub);margin-bottom:8px;}

.linkbox{
  font-size:12px;
  color:var(--sub);
  background:rgba(255,255,255,.10);
  border:1px dashed var(--stroke);
  border-radius:16px;
  padding:12px 12px;
  word-break:break-all;
}

.row{display:flex; gap:12px; margin-top:16px; flex-wrap:wrap;}

.btn{
  appearance:none;
  border:0;
  cursor:pointer;
  padding:12px 16px;
  border-radius:16px;
  font-weight:800;
  font-size:14px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:46px;
  text-decoration:none;
}

.btn.primary{background:var(--btn); color:var(--btnText);}
.btn.ghost{background:var(--ghost); color:var(--text); border:1px solid var(--stroke);}

.btn:active{transform: translateY(1px);}

.foot{
  margin-top:16px;
  font-size:12px;
  color:var(--sub);
  line-height:1.65;
}

.footText{ margin-bottom: 10px; }

.footLinks{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
}

.footLinks a{
  color:var(--text);
  text-decoration:none;
  opacity:.9;
}

.footLinks a:hover{
  opacity:1;
  text-decoration:underline;
}

.dot{opacity:.45;}
a{color:inherit;}

/* Docs pages (privacy/terms/disclaimer) */
.doc{
  padding:18px 20px 22px 20px;
}

.doc h1{
  margin:0 0 10px 0;
  font-size:20px;
  font-weight:800;
}

.doc .meta{
  color:var(--sub);
  font-size:12px;
  margin-bottom:14px;
}

.doc h2{
  margin:18px 0 10px 0;
  font-size:15px;
  font-weight:800;
}

.doc p, .doc li{
  color:var(--text);
  font-size:13px;
  line-height:1.75;
}

.doc ul{
  padding-left:18px;
  margin:8px 0 12px 0;
}

.doc .backRow{
  display:flex;
  gap:10px;
  margin-top:18px;
  flex-wrap:wrap;
}