/* Reset and base */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --color-bg: #0d1119;
  --color-accent: #ffc400;
  --color-secondary: #00396d;
  --color-text: #f0f0f0;
  --color-text-slate: #a0aab8;
  --color-border: #2a3342;
  --font-sans: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --max-width: 1160px;
  --spacing-desktop: 28px;
  --spacing-mobile: 18px;
  --radius: 12px;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-sans);
  background: var(--color-bg);
  color: var(--color-text);
  line-height: 1.6;
  min-height: 100vh;
  padding-bottom: calc(92px + env(safe-area-inset-bottom)); /* reserved account bar space */
}

.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: var(--color-accent);
  color: #000;
  padding: 8px 16px;
  z-index: 100;
  border-radius: 0 0 var(--radius) 0;
}

.skip-link:focus {
  top: 0;
}

:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: var(--color-accent);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* Layout */
.site-wrapper {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--spacing-desktop);
}

.section {
  padding: 64px 0;
  border-bottom: 1px solid var(--color-border);
}

.section:last-of-type {
  border-bottom: none;
}

h1, h2, h3 {
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

h1 {
  font-size: 2.5rem;
  margin-bottom: 16px;
  color: var(--color-text);
}

h2 {
  font-size: 2rem;
  margin-bottom: 20px;
  color: var(--color-text);
}

h3 {
  font-size: 1.25rem;
  margin-bottom: 8px;
}

p {
  font-size: 1rem;
  color: var(--color-text-slate);
  margin-bottom: 16px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 24px;
  border-radius: var(--radius);
  font-weight: 600;
  font-size: 1rem;
  transition: opacity 0.2s, transform 0.2s;
  cursor: pointer;
  text-align: center;
  min-height: 44px;
  min-width: 120px;
  border: none;
}

.btn:hover {
  opacity: 0.9;
  transform: translateY(-1px);
  text-decoration: none;
}

.btn--primary {
  background: var(--color-accent);
  color: #000;
}

.btn--secondary {
  background: transparent;
  color: var(--color-accent);
  border: 2px solid var(--color-accent);
}

/* Logo plate */
.logo-plate {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  border-radius: 8px;
  padding: 4px;
  width: auto;
}

.logo-plate--small {
  padding: 2px;
}

/* Header */
.header {
  padding: 20px 0 0;
}

.header__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.header__logo .logo-plate img {
  width: 150px;
  height: 80px;
}

.header__actions {
  display: flex;
  gap: 12px;
}

/* Navigation section */
.nav-section {
  margin-top: 16px;
  border-top: 1px solid var(--color-border);
  padding: 8px 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.nav-section ul {
  display: flex;
  gap: 24px;
  list-style: none;
  white-space: nowrap;
  padding: 4px 0;
}

.nav-section a {
  color: var(--color-text-slate);
  font-weight: 500;
  padding: 8px 0;
  border-bottom: 2px solid transparent;
  transition: border-color 0.2s, color 0.2s;
}

.nav-section a:hover {
  color: var(--color-accent);
  border-bottom-color: var(--color-accent);
  text-decoration: none;
}

/* Hero */
.hero__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
}

.hero__text {
  padding-right: 20px;
}

.hero__intro {
  font-size: 1.125rem;
  margin-bottom: 24px;
}

.hero__cta {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.media-card {
  background: var(--color-secondary);
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  overflow: hidden;
  transform: rotate(1deg);
  transition: transform 0.3s ease;
}

.media-card:hover {
  transform: rotate(0deg) scale(1.02);
}

.media-card__frame {
  aspect-ratio: 16 / 9;
  background: #1a2332;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.media-card__art {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  color: var(--color-text-slate);
}

.media-card__caption {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--color-bg);
}

.media-card__caption p {
  margin: 0;
  font-weight: 500;
  color: var(--color-text);
}

.media-card__caption img {
  width: 80px;
  height: auto;
}

/* Bento */
.bento__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}

.bento__featured {
  grid-row: span 2;
  background: var(--color-secondary);
  border-radius: var(--radius);
  padding: 32px;
  border: 1px solid var(--color-border);
}

.bento__cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.card {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 20px;
  transition: border-color 0.2s;
}

.card:hover {
  border-color: var(--color-accent);
}

.card__icon {
  margin-bottom: 12px;
}

.card h3 {
  color: var(--color-text);
}

.card p {
  font-size: 0.9rem;
}

/* Editorial */
.editorial__inner {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 40px;
}

.editorial__heading h2 {
  margin: 0;
}

/* Steps */
.steps__list {
  list-style: none;
  counter-reset: step;
  display: grid;
  gap: 24px;
}

.steps__list li {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  background: var(--color-secondary);
  border-radius: var(--radius);
  padding: 20px;
  border: 1px solid var(--color-border);
}

.step__number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--color-accent);
  color: #000;
  font-weight: 700;
  font-size: 1.25rem;
  flex-shrink: 0;
}

/* FAQ */
.faq__item {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  margin-bottom: 12px;
  overflow: hidden;
  background: rgba(255,255,255,0.02);
}

.faq__item summary {
  padding: 16px 20px;
  font-weight: 600;
  cursor: pointer;
  min-height: 44px;
  display: flex;
  align-items: center;
  list-style: none;
  transition: background 0.2s;
}

.faq__item summary::-webkit-details-marker {
  display: none;
}

.faq__item summary::after {
  content: '+';
  margin-left: auto;
  font-size: 1.5rem;
  color: var(--color-accent);
  transition: transform 0.2s;
}

.faq__item[open] summary::after {
  content: '−';
}

.faq__item[open] summary {
  background: rgba(255,196,0,0.05);
}

.faq__item p {
  padding: 0 20px 16px;
  margin: 0;
}

/* CTA */
.cta__inner {
  text-align: center;
  background: var(--color-secondary);
  border-radius: var(--radius);
  padding: 48px 32px;
  border: 1px solid var(--color-border);
}

.cta__buttons {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}

/* Footer */
.footer {
  padding: 40px 0 100px;
  border-top: 1px solid var(--color-border);
}

.footer__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  text-align: center;
}

.footer__logo img {
  width: 120px;
  height: auto;
}

.footer__nav ul {
  display: flex;
  gap: 20px;
  list-style: none;
  flex-wrap: wrap;
  justify-content: center;
}

.footer__nav a {
  color: var(--color-text-slate);
}

.footer__attribution {
  font-size: 0.85rem;
  max-width: 500px;
}

.footer__attribution a {
  color: var(--color-accent);
}

/* Bottom bar */
.bottom-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--color-bg);
  border-top: 1px solid var(--color-border);
  padding: 12px var(--spacing-desktop);
  z-index: 50;
}

.bottom-bar__inner {
  max-width: 560px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.bottom-bar .btn {
  width: 100%;
  min-height: 44px;
}

/* Responsive */
@media (prefers-reduced-motion: reduce) {
  .media-card {
    transform: none !important;
  }
  * {
    transition: none !important;
  }
}

@media (max-width: 768px) {
  .site-wrapper {
    padding: 0 var(--spacing-mobile);
  }

  .hero__inner {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .hero__text {
    padding-right: 0;
  }

  .media-card {
    transform: none;
  }

  .bento__inner {
    grid-template-columns: 1fr;
  }

  .bento__featured {
    grid-row: auto;
  }

  .bento__cards {
    grid-template-columns: 1fr;
  }

  .editorial__inner {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  h1 {
    font-size: 2rem;
  }

  h2 {
    font-size: 1.5rem;
  }

  .section {
    padding: 40px 0;
  }

  .header__inner {
    flex-direction: column;
    align-items: flex-start;
  }

  .bottom-bar {
    padding: 8px var(--spacing-mobile);
  }
}

@media (max-width: 480px) {
  .header__actions {
    width: 100%;
    justify-content: flex-end;
  }

  .nav-section ul {
    gap: 12px;
  }

  .faq__item summary {
    padding: 12px 16px;
  }
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
  }
}

/* Ensure no horizontal overflow */
.site-wrapper {
  overflow: hidden;
}
/* Local review: Panel-inspired header, native bento controls, and responsive media. */
html,body{overflow-x:clip;scroll-padding-top:20px}a:focus-visible,summary:focus-visible{outline:3px solid var(--color-accent);outline-offset:4px}.site-wrapper{max-width:1216px;overflow:visible}.skip-link{top:0;transform:translateY(-150%)}.skip-link:focus{transform:translateY(0)}.header{padding-top:16px}.header__inner{flex-wrap:nowrap}.header__logo{display:inline-flex;flex:none}.header__logo .logo-plate img{width:112px;height:auto}.logo-plate{padding:5px 7px}.header__actions{flex-wrap:nowrap}.header__actions .btn{min-width:0;min-height:44px;font-size:14px;padding:10px 20px}.nav-section a{display:inline-flex;min-height:44px;align-items:center;padding:8px 4px}.section-kicker{display:block;font-size:11px;font-weight:800;letter-spacing:.14em;color:var(--color-accent);margin-bottom:18px}.hero h1{font-size:clamp(36px,4.7vw,62px);font-weight:850;letter-spacing:-.045em;line-height:1.08;margin-bottom:24px}.hero h1 span{color:var(--color-accent)}.hero__text{min-width:0}.hero__intro{line-height:1.8;font-size:16px}.hero__inner{gap:48px;grid-template-columns:1.08fr .92fr}.hero__media{min-width:0}.media-card{border-radius:20px;background:#111c2d;box-shadow:0 24px 60px #0005}.media-card__frame{aspect-ratio:1.45;background:radial-gradient(ellipse at 50% 35%,#182741,#0b111c 75%);padding:0;overflow:hidden}.media-card__art{width:100%;height:100%}.hero-svg{display:block;width:100%;height:100%;max-width:100%;animation:none}.media-card__caption{padding:14px 18px}.media-card__caption img{width:80px}.media-card__caption p{font-size:13px}.bento__inner{grid-template-columns:1fr 1.5fr;gap:18px}.bento__featured{grid-row:auto;background:linear-gradient(145deg,#073a63,#101c2e);padding:30px}.bento__featured h2{font-size:clamp(25px,3vw,36px);line-height:1.18;font-weight:800}.bento__featured p{color:#d5dfeb;font-size:14px;line-height:1.8}.bento__cards{align-items:start}.card{background:#151e2b;padding:22px;min-width:0}.card summary{position:relative;display:flex;align-items:flex-start;gap:12px;flex-wrap:wrap;cursor:pointer;list-style:none;min-height:76px}.card summary::-webkit-details-marker{display:none}.card__icon{display:block;flex:1 0 100%;margin-bottom:4px}.card__icon svg{display:block}.card__title{font-size:15px;font-weight:750;line-height:1.5}.card__expand{margin-left:auto;color:var(--color-accent);font-size:20px;line-height:1}.card[open] .card__expand{transform:rotate(45deg)}.card p{margin:16px 0 0;line-height:1.8}.editorial__content p{font-size:15px;line-height:1.9}.editorial__heading h2{font-weight:800;font-size:clamp(26px,3vw,36px)}.steps__list{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.steps__list li{display:block;min-width:0;padding:24px;background:#151e2b;border-top:3px solid var(--color-accent)}.step__number{width:36px;height:36px;font-size:16px;margin-bottom:18px}.steps__list h3{font-size:17px;line-height:1.4}.steps__list p{font-size:14px;margin-bottom:0}.faq__inner{max-width:860px;margin:auto}.faq__item summary{gap:16px}.faq__item p{line-height:1.8;font-size:15px}.cta__inner{background:linear-gradient(120deg,#12304c,#11243a);padding:44px 28px}.cta__inner h2{font-weight:800}.footer{padding-bottom:28px}.footer__logo .logo-plate{margin:0 auto 18px}.footer__nav a{display:inline-flex;align-items:center;min-height:44px;padding:4px}.footer__nav ul{gap:10px 22px}.bottom-bar{padding-bottom:max(12px,env(safe-area-inset-bottom));background:#101722;box-shadow:0 -8px 32px #0004}.bottom-bar__inner{min-width:0}.bottom-bar .btn{min-width:0}.bottom-bar .btn--secondary{background:#192335;color:var(--color-text);border-color:#3d4a5d}.header__actions .btn--secondary{color:var(--color-text);border-color:#3d4a5d}
@media(max-width:900px){.hero__inner{gap:30px}.bento__inner{grid-template-columns:1fr}.bento__cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:768px){.header__inner{flex-direction:row;align-items:center}.hero__inner{grid-template-columns:1fr}.hero h1{font-size:clamp(36px,8.5vw,52px)}.hero__intro{max-width:54ch}.media-card{max-width:520px;margin:auto;transform:none}.media-card:hover{transform:none}.editorial__inner{grid-template-columns:1fr}.steps__list{grid-template-columns:1fr}.steps__list li{padding:22px}.bottom-bar{padding-bottom:max(10px,env(safe-area-inset-bottom))}.header__actions .btn{padding:10px 14px}}
@media(max-width:480px){.header__actions{width:auto;gap:8px}.header__logo .logo-plate img{width:100px}.hero__cta{gap:10px}.hero__cta .btn{flex:1;min-width:0}.bento__cards{grid-template-columns:1fr}.bento__featured{padding:24px}.hero__intro{font-size:15px}.media-card__caption{padding:12px}.media-card__caption p{font-size:12px}.nav-section ul{gap:20px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important;animation:none!important}.media-card,.media-card:hover{transform:none}}

.footer__attribution a{text-decoration:underline;text-underline-offset:3px}


/* APK information page. */
.apk-breadcrumb{display:flex;align-items:center;gap:12px;font-size:13px;color:var(--color-text-slate);padding-top:24px}.apk-breadcrumb a{text-decoration:underline;text-underline-offset:3px}.apk-checklist{display:grid;gap:12px;margin-top:24px}.apk-check-item{display:flex;align-items:flex-start;gap:16px;min-height:64px;padding:18px 20px;border:1px solid var(--color-border);border-left:3px solid var(--color-accent);border-radius:12px;background:#151e2b;cursor:pointer;color:var(--color-text);line-height:1.7}.apk-check-item input{width:20px;height:20px;flex:0 0 20px;margin-top:3px;accent-color:var(--color-accent)}.apk-check-item:has(input:checked){border-color:var(--color-accent)}.apk-page .media-card__frame>svg{width:100%;height:100%;max-height:320px}.apk-page .hero__intro{max-width:54ch}.nav-section a[aria-current=page]{color:var(--color-accent);border-bottom-color:var(--color-accent)}@media(max-width:480px){.apk-page .hero__cta .btn{flex:1 1 100%}.apk-check-item{padding:16px}}

.apk-checklist{list-style:none}.apk-checklist>li{list-style:none}.apk-page .media-card__caption span{font-size:13px;color:var(--color-text)}

/* Expanded editorial guide */
.article-nav{display:grid;gap:10px;margin-top:24px;font-size:13px}.article-nav a{display:block;padding:10px 12px;border:1px solid var(--color-border);border-radius:8px;line-height:1.6;color:#d4dfef}.article-nav a:hover{border-color:var(--color-accent);color:var(--color-accent)}.editorial__content h3{font-size:21px;line-height:1.45;margin:32px 0 14px;color:#f0f0f0}.editorial__content a{text-decoration:underline;text-underline-offset:3px;color:#ffda73}.editorial__heading{align-self:start}@media(min-width:901px){.editorial__heading{position:sticky;top:24px}}