/* Initial states for timeline */
  #main-card { opacity: 0; }
  #main-card-outline { opacity: 0; transform-origin: 50% 50%; }
  #bars-main-inputs { opacity: 0; }
  #camera-icon { opacity: 0; }
  .part { opacity: 0; transform: translateY(4px); }

  /* Safe transform-origins for animated groups */
  #main-card-outline,
  #bars-main-inputs rect,
  #bars-main-inputs,
  #qr-blocks,
  #qr-blocks path,
  #qr-blocks rect,
  #left-decors,
  #left-decors .float,
  #right-decors,
  #right-decors .float {
    transform-origin: 50% 50%;
  }


.addpass-ai-start{margin:32px 0;color:#f8fafc;max-width:760px}
.addpass-ai-start h2{font-size:18px;line-height:1.3;margin:0 0 12px}
.addpass-ai-start p{font-size:13px;line-height:1.6;margin:0 0 16px}
#addpass-copy-quickstart{appearance:none;background:#211c38;border:1px solid #9278db;border-radius:8px;color:#f8fafc;padding:14px 20px;font:inherit;font-weight:600;cursor:pointer;min-height:48px}
#addpass-copy-quickstart:hover{background:#33294e}
#addpass-copy-quickstart:focus-visible,.addpass-ai-start summary:focus-visible{outline:2px solid #c4b5fd;outline-offset:4px}
#addpass-copy-quickstart:disabled{cursor:wait}
#addpass-copy-status{min-height:24px;margin:8px 0;font-size:14px}
.addpass-ai-start summary{cursor:pointer;font-size:14px;color:#d1dfe9}
#addpass-quickstart-text{max-height:440px;overflow:auto;white-space:pre-wrap;overflow-wrap:anywhere;background:#151619;border:1px solid #54456d;border-radius:8px;padding:16px;font-size:13px;line-height:1.6;text-align:left}

/* Progressive enhancement: artwork remains visible if JavaScript is unavailable. */
#main-card, #main-card-outline, #bars-main-inputs, #camera-icon, .part { opacity: 1; }
.skip-link { position: absolute; top: -100px; left: 16px; z-index: 1000; background: #211c38; color: white; padding: 12px; }
.skip-link:focus { top: 12px; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid #c4b5fd; outline-offset: 4px; }
.simple-btn-link { color: #f1ecff; }
pre { max-width: 100%; }
#addpass-quickstart-guide > a { display: inline-block; color: #d8cfff; margin-top: 12px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; } .float { opacity: 0; } }
#svg-animation { opacity: 0; }
@media (prefers-reduced-motion: reduce) { #svg-animation, #main-card, #main-card-outline, #bars-main-inputs, #camera-icon, .part { opacity: 1 !important; } }
/* Let the existing stacked layout shrink on narrow phones. */
@media (max-width: 479px) {
  .div-block-3, .div-block-3 > div, .code-wrapper, .code-block-2 { min-width: 0; max-width: 100%; }
  .div-block-3 { width: 100%; }
  .developer-cta-button { padding: 12px 8px; }
}
@media (max-width: 360px) {
  .navbar-wrapper { flex-wrap: wrap; justify-content: center; gap: 12px; }
  .nav-action-row { flex-basis: 100%; }
  .ap-nav-link { white-space: nowrap; }
}

.breadcrumbs{font-size:13px;line-height:1.8;color:#a8a6b5;margin-bottom:32px;overflow-wrap:anywhere}.discovery-links{max-width:1180px;margin:0 auto;padding:40px 24px;color:#d1dfe9;font-family:'Public Sans',sans-serif}.discovery-links h2{font-size:24px}.discovery-links p{font-size:16px;line-height:1.8}.discovery-links a,.footer-resources a{color:#d2bfff}.footer-resources{display:flex;flex-wrap:wrap;gap:16px;justify-content:center;margin-top:24px;font:14px 'Public Sans',sans-serif}.preview-notice{background:#211b32;color:#d8c8ff;text-align:center;padding:10px;font:13px 'Public Sans',sans-serif}

/* Shared footer and API discovery cards. */
.marketing-footer{height:auto;padding:64px 28px;border-top:1px solid #2a2933;font-family:'Public Sans',sans-serif}
.footer-grid{max-width:1132px;margin:auto;display:grid;grid-template-columns:1.3fr 1fr 1.2fr 1fr;gap:40px}
.footer-identity .footer-brand{display:inline-block;margin:0;padding:0}.footer-identity svg{height:28px;width:144px}
.footer-identity p{font-size:14px;line-height:1.8;color:#aeb9c5;margin:20px 0 0}
.footer-column{display:flex;flex-direction:column;align-items:flex-start;gap:14px;min-width:0}
.footer-column h2{font-size:14px;line-height:1.4;font-weight:600;color:#f3efff;margin:0 0 6px}
.footer-column a{font-size:14px;line-height:1.6;color:#b9c4cf;text-decoration:none;text-underline-offset:4px}
.footer-column a:hover{color:#e2d5ff;text-decoration:underline}
.api-build{max-width:1180px;margin:0 auto;padding:64px 24px 88px;font-family:'Public Sans',sans-serif}
.build-eyebrow{display:block;color:#b8a1f1;font-size:11px;line-height:1.5;font-weight:600;letter-spacing:1.8px;text-transform:uppercase}
.api-build-intro h2{color:#f3efff;font-size:36px;line-height:1.2;letter-spacing:-1px;margin:12px 0}
.api-build-intro p{color:#b9c4cf;font-size:17px;line-height:1.7;margin:0 0 32px}
.build-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.build-card{display:flex;flex-direction:column;overflow:hidden;border:1px solid #363140;border-radius:18px;background:#141318;text-decoration:none;color:#eff0f7;transition:border-color .2s,transform .2s}
.build-card:hover{border-color:#ad93e7;transform:translateY(-3px)}
.build-art{height:200px;display:flex;align-items:center;justify-content:center;gap:30px;border-bottom:1px solid #363140;background:radial-gradient(ellipse at 35% 100%,#46315d,transparent 75%),#1c1825;overflow:hidden;padding:24px}
.mini-pass{width:145px;flex-shrink:0;border:1px solid #b1a0db;border-radius:15px;background:linear-gradient(140deg,#7d64b9,#392654);padding:16px;transform:rotate(-8deg);box-shadow:10px 14px 30px #0004}
.mini-pass>span{font-size:8px;letter-spacing:1px;color:#e9ddff}.mini-pass strong{display:block;font-size:23px;margin:12px 0;color:#fff}.mini-pass div{display:flex;gap:8px}.mini-pass i{height:5px;width:40px;border-radius:3px;background:#c7b1ee}.mini-pass b{display:block;text-align:center;margin-top:10px;font-size:22px;letter-spacing:3px;color:#eee3ff}.art-code{font:13px monospace;color:#cbb7f3}
.build-art-code{background:radial-gradient(ellipse at 70% 100%,#273d53,transparent 80%),#171b24}.mini-editor{width:310px;max-width:100%;border:1px solid #515364;border-radius:10px;background:#11131be6;padding:16px 20px;box-shadow:0 12px 30px #0003}.editor-dots{font-size:10px;letter-spacing:3px;color:#716682;margin-bottom:16px}.mini-editor code{font:12px/1.8 monospace;color:#d1dfe9}.mini-editor code span{color:#bea3ff}.mini-editor em{color:#9dcbd4;font-style:normal}
.build-card-body{padding:28px;display:flex;flex-direction:column;flex:1}.build-card h3{font-size:23px;line-height:1.3;letter-spacing:-.4px;color:#f3efff;margin:12px 0}.build-card p{font-size:15px;line-height:1.8;color:#b9c4cf;margin:0 0 24px}.build-card-link{margin-top:auto;display:flex;justify-content:space-between;gap:12px;color:#d9c7ff;font-size:14px;font-weight:600;line-height:1.6}
@media(max-width:850px){.footer-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:36px}.art-code{display:none}}
@media(max-width:600px){.marketing-footer{padding:40px 24px}.footer-grid{gap:32px 20px}.footer-identity{grid-column:1/-1}.footer-column a{font-size:13px}.api-build{padding:40px 20px 56px}.api-build-intro h2{font-size:30px}.build-grid{grid-template-columns:1fr}.build-card-body{padding:24px}.build-art{height:180px}.mini-editor{padding:14px}.mini-editor code{font-size:11px}}