/* Ayepps store. No third-party assets; fonts are whatever the device has. */
:root { --bg:#f3f5f8; --surface:#fff; --border:#dde2ea; --text:#17202c; --muted:#5b6778; --accent:#e49a2b; --on-accent:#14110a; color-scheme: light dark; }
@media (prefers-color-scheme: dark) { :root { --bg:#0d131d; --surface:#151f2e; --border:#23354d; --text:#eff2f5; --muted:#a3b0c2; --on-accent:#0a0c10; } }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font: 16px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
.wrap { max-width: 640px; margin: 0 auto; padding: 18px 16px calc(28px + env(safe-area-inset-bottom)); padding-top: calc(18px + env(safe-area-inset-top)); }
.hero { text-align: center; padding: 10px 0 18px; }
.hero.small { padding-bottom: 8px; }
.mark { width: min(78%, 300px); height: auto; }
h1 { margin: 10px 0 4px; font-size: 28px; line-height: 1.15; }
.lead { margin: 8px auto; color: var(--muted); max-width: 46ch; }
.hint { color: var(--muted); font-size: 14px; margin: 8px 0; }
.back { margin: 0 0 4px; font-size: 15px; }
a { color: var(--accent); }
.apps { list-style: none; margin: 8px 0; padding: 0; display: grid; gap: 10px; }
.app { display: flex; align-items: center; gap: 14px; background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: 12px 14px; }
.app.soon .ico { opacity: .55; filter: grayscale(.35); }
.ico { width: 56px; height: 56px; border-radius: 14px; flex: none; background: var(--border); }
.ico.big { width: 88px; height: 88px; border-radius: 22px; }
.ico.dim { opacity: .6; }
.meta { flex: 1 1 auto; min-width: 0; }
.meta h2 { margin: 0; font-size: 18px; }
.meta p { margin: 2px 0 0; color: var(--muted); font-size: 14px; }
.btn { display: inline-block; text-decoration: none; text-align: center; font: inherit; font-weight: 600; font-size: 15px; color: var(--text); background: transparent; border: 1px solid var(--border); border-radius: 14px; padding: 10px 16px; min-height: 44px; min-width: 88px; cursor: pointer; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.btn.wide { display: block; max-width: 320px; margin: 12px auto 0; }
.btn:focus-visible, a:focus-visible, summary:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.app.soon .btn { color: var(--muted); }
.more { text-align: center; color: var(--muted); font-size: 14px; }
.soonline { margin: 6px 0; font-size: 20px; font-weight: 700; color: var(--accent); }
.sub { font-size: 14px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin: 22px 0 4px; }
.how { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 4px 14px; margin: 10px 0; }
.how summary { cursor: pointer; font-weight: 600; font-size: 17px; padding: 12px 0; }
.how ol { margin: 0 0 12px; padding-left: 22px; }
.how li { margin: 8px 0; }
.first { margin-top: 18px; }
.first h2 { font-size: 18px; margin: 0 0 4px; }
.first p { color: var(--muted); margin: 0; }
.foot { margin-top: 28px; text-align: center; color: var(--muted); font-size: 13px; }
.foot .dev strong { color: var(--text); }
@media (max-width: 380px) { .app { flex-wrap: wrap; } .app .btn { width: 100%; } }