:root {
  --sky: #94E8FF; --sky2: #5FC8F5; --panel: #1B2A4A; --raised: #25365E; --outline: #0B1330; --edge: #101B3A;
  --text: #FFFFFF; --dim: #B7C4E6; --gold: #F6C344; --gold-light: #FFE08A; --gold-dark: #B8860B; --green: #3DDC97; --ink: #1B2A4A;
}
* { box-sizing: border-box; }
html { background: var(--sky); }
body { margin: 0; min-height: 100vh; color: var(--ink); font: 700 17px/1.55 Nunito, system-ui, sans-serif;
  background: linear-gradient(180deg, var(--sky2) 0, var(--sky) 420px) no-repeat, var(--sky); }
a { color: inherit; }
img { display: block; max-width: 100%; height: auto; }

/* The app's Panel: thick dark outline, gloss strip on top, a darker bottom edge for thickness. */
.panel { position: relative; background: var(--panel); color: var(--text); border: 2px solid var(--outline); border-radius: 16px;
  box-shadow: 0 4px 0 var(--edge), inset 0 3px 0 rgba(255,255,255,.10); }

/* Store buttons: the app's dark secondary button, wide enough for the store name. */
.stores { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.store { display: inline-flex; align-items: center; gap: 10px; min-width: 200px; padding: 9px 22px 10px 16px; border: 2px solid var(--outline);
  border-radius: 14px; background: linear-gradient(180deg, #2F4373 0 20%, var(--panel) 20%); color: var(--text); text-decoration: none;
  text-align: left; font: 22px/1.05 'Lilita One', sans-serif; box-shadow: 0 4px 0 var(--edge); transition: transform .08s; }
.store:hover { transform: translateY(-1px); }
.store:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--edge); }
.store svg { width: 30px; height: 30px; flex: none; fill: #fff; }
.store small { display: block; font: 800 12px Nunito, sans-serif; color: var(--dim); }
.toast { position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 20px); opacity: 0; pointer-events: none; padding: 10px 22px 12px;
  border: 2px solid var(--outline); border-radius: 999px; background: linear-gradient(180deg, var(--gold-light) 0 18%, var(--gold) 18%);
  color: #3B2A05; font: 19px 'Lilita One', sans-serif; box-shadow: 0 4px 0 var(--gold-dark); white-space: nowrap; transition: opacity .2s, transform .2s; }
.toast.show { opacity: 1; transform: translate(-50%, 0); animation: pop .35s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes pop { from { transform: translate(-50%, 20px) scale(.8); } to { transform: translate(-50%, 0) scale(1); } }

.home { max-width: 760px; margin: 0 auto; padding: 28px 16px 24px; text-align: center; }
.logo { width: min(420px, 88%); margin: 0 auto -8px; }
.tag { font: 30px/1.15 'Lilita One', sans-serif; margin: 0 0 22px; }
/* An iPhone drawn in CSS around a screenshot; the screenshot carries its own status bar and island. */
.phone { position: relative; width: min(330px, 84%); margin: 40px auto 0; padding: 11px; border: 3px solid var(--outline); border-radius: 17% / 8%;
  background: linear-gradient(150deg, #3A4F85, #1B2A4A 45%, #0B1330); box-shadow: 0 7px 0 var(--edge), inset 0 0 0 2px rgba(255,255,255,.14), 0 26px 44px rgba(11,19,48,.28); }
.phone::before, .phone::after { content: ''; position: absolute; width: 5px; border: 2px solid var(--outline); background: #2F4373; }
.phone::before { right: -8px; top: 25%; height: 13%; border-radius: 0 4px 4px 0; }
.phone::after { left: -8px; top: 19%; height: 9%; border-radius: 4px 0 0 4px; }
.screen { overflow: hidden; border-radius: 13.5% / 6.2%; background: #000; }
.screen img { width: 100%; }
.chips { list-style: none; padding: 0; margin: 36px 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; text-align: left; }
.chips li { padding: 14px 16px 16px; font-size: 15px; color: var(--dim); }
.chips b { display: block; font: 19px 'Lilita One', sans-serif; color: var(--gold); margin-bottom: 4px; font-weight: 400; }
@media (max-width: 640px) { .chips { grid-template-columns: 1fr; } .tag { font-size: 26px; } }

.doc { max-width: 760px; margin: 0 auto; padding: 44px 16px 24px; }
.doc .panel { padding: 30px 26px 26px; }
.tab { position: absolute; top: -20px; left: 20px; margin: 0; max-width: calc(100% - 40px); padding: 4px 16px 6px; border: 2px solid var(--outline);
  border-radius: 10px; background: linear-gradient(180deg, var(--gold-light) 0 22%, var(--gold) 22%); color: #3B2A05;
  font: 400 19px/1.2 'Lilita One', sans-serif; box-shadow: 0 3px 0 var(--gold-dark); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.doc h2 { font: 400 21px 'Lilita One', sans-serif; color: var(--gold); margin: 28px 0 6px; padding-top: 20px; border-top: 2px solid var(--raised); }
.doc .tab + h2 { border-top: 0; padding-top: 0; margin-top: 4px; }
.doc p, .doc li { color: var(--text); }
.doc em { color: var(--dim); }
.doc strong { color: var(--gold-light); font-weight: 800; }
.doc a { color: var(--green); overflow-wrap: anywhere; }
.doc ul { padding-left: 20px; }
.doc > .panel > p:first-of-type em { display: inline-block; margin-top: 6px; }

footer { max-width: 760px; margin: 0 auto; padding: 24px 16px 40px; text-align: center; font-size: 14px; }
footer nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 14px; }
.pill { padding: 6px 16px 7px; border: 2px solid var(--outline); border-radius: 999px; background: var(--panel); color: var(--text);
  text-decoration: none; font: 16px 'Lilita One', sans-serif; box-shadow: 0 3px 0 var(--edge); }
.pill.on { background: var(--gold); color: #3B2A05; box-shadow: 0 3px 0 var(--gold-dark); }