@font-face {
  font-family:Montserrat;
  src:url('./assets/Montserrat-Regular.woff2') format('woff2');
  font-style:normal;
  font-weight:400;
  font-display:swap
}
@font-face {
  font-family:Montserrat;
  src:url('./assets/Montserrat-Medium.woff2') format('woff2');
  font-style:normal;
  font-weight:500;
  font-display:swap
}
@font-face {
  font-family:Montserrat;
  src:url('./assets/Montserrat-SemiBold.woff2') format('woff2');
  font-style:normal;
  font-weight:600;
  font-display:swap
}
/* Values from Anpdf's approved design/tokens.css. Document colors are independent. */
:root {
  color-scheme:light;
  --text:#292a2e;
  --secondary:#6b6e76;
  --workspace:#f1f4f8;
  --panel:#fafbfc;
  --surface:#fff;
  --rail:#e9edf2;
  --primary:#b84230;
  --primary-hover:#a43828;
  --selected:#ecebf0;
  --hover:#fff0ec;
  --border:#0b120e24;
  font-family:Montserrat,ui-sans-serif,sans-serif;
  color:var(--text);
  background:var(--workspace);
  font-synthesis:none
}
* {
  box-sizing:border-box
}
body {
  margin:0
}
main {
  max-width:1088px;
  margin:0 auto;
  padding:24px 48px 42px
}
h1,p,figure {
  margin:0
}
strong {
  font-weight:600
}
.icon {
  width:22px;
  height:22px;
  flex-shrink:0;
  vertical-align:middle
}
img {
  object-fit:contain;
  flex-shrink:0
}
.welcome-header {
  text-align:center;
  margin-bottom:24px;
  animation:enter .32s ease-out both
}
h1 {
  font-size:40px;
  line-height:1.2;
  letter-spacing:-1.2px;
  font-weight:600
}
h1 span {
  color:var(--primary)
}
.intro {
  font-size:18px;
  line-height:1.5;
  color:var(--secondary);
  margin-top:8px
}
.step-instructions {
  text-align:center;
  margin-bottom:20px
}
.step-instructions p {
  font-size:16px;
  line-height:1.85
}
.inline-number {
  display:inline-flex;
  justify-content:center;
  align-items:center;
  width:24px;
  height:24px;
  border-radius:50%;
  background:var(--selected);
  color:var(--primary);
  font-weight:600;
  font-size:13px;
  vertical-align:middle;
  margin:0 3px
}
.browser {
  position:relative;
  border:1px solid var(--border);
  border-radius:16px;
  background:var(--surface);
  box-shadow:0 12px 32px rgb(41 42 46 / 5%);
  overflow:hidden;
  text-align:left
}
.chrome-tabs {
  height:44px;
  background:var(--rail);
  display:flex;
  align-items:center;
  gap:16px;
  padding:0 18px;
  font-size:11px
}
.window-dots {
  display:flex;
  gap:6px
}
.window-dots i {
  width:8px;
  height:8px;
  border-radius:50%;
  background:#b9bec7
}
.chrome-tab {
  display:flex;
  align-items:center;
  gap:8px;
  align-self:end;
  height:35px;
  width:225px;
  padding:0 12px;
  border-radius:8px 8px 0 0;
  background:var(--panel)
}
.chrome-tab img {
  width:16px;
  height:16px
}
.chrome-tab span {
  flex:1
}
.chrome-tab .icon,.chrome-tabs>.icon {
  width:14px;
  height:14px
}
.chrome-address {
  height:58px;
  display:flex;
  align-items:center;
  gap:18px;
  background:var(--panel);
  border-bottom:1px solid var(--border);
  padding:0 18px
}
.back .icon {
  width:18px;
  height:18px
}
.address {
  display:flex;
  align-items:center;
  gap:12px;
  height:32px;
  border-radius:20px;
  flex:1;
  background:var(--workspace);
  color:var(--secondary);
  padding:0 12px;
  min-width:0;
  font:12px Montserrat, sans-serif
}
.address span {
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis
}
.address .icon {
  width:16px;
  height:16px
}
.toolbar-target {
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  width:38px;
  height:38px;
  flex-shrink:0;
  border-radius:50%
}
.target,.pinned {
  background:var(--selected);
  color:var(--primary);
  outline:2px solid var(--primary);
  outline-offset:3px
}
/* Browser glyph stays neutral; the tutorial ring and badge carry the accent. */
.browser-puzzle {
  color:var(--text)
}
/* The target owns its arrow. At 45 degrees, offset the tip by the outer
   ring radius + 8px clear space. The filled contour ends exactly at its tip. */
.toolbar-target { --target-radius:19px; }
.pin-target { --target-radius:15px; }
.guide-arrow {
  --tip-x:196px;
  --tip-y:48px;
  --tip-offset:calc((var(--target-radius) + 5px + 8px) * .7071067812);
  position:absolute;
  width:200px;
  height:64px;
  left:calc(50% - var(--tip-offset) - var(--tip-x));
  top:calc(50% - var(--tip-offset) - var(--tip-y));
  overflow:visible;
  pointer-events:none;
  color:var(--primary);
}
.callout {
  position:absolute;
  right:-10px;
  top:-12px;
  display:grid;
  place-items:center;
  width:22px;
  height:22px;
  border-radius:50%;
  background:var(--primary);
  color:white;
  font:600 12px Montserrat,sans-serif;
  box-shadow:0 0 0 3px var(--panel);
  z-index:2
}
.browser-more .icon {
  width:18px
}
.browser-content {
  height:336px;
  overflow:hidden;
  padding:44px 52px;
  background:var(--surface)
}
.ghost-page {
  width:36%;
  max-width:285px;
  display:flex;
  flex-direction:column;
  gap:16px;
  opacity:.5
}
.ghost-brand {
  display:flex;
  align-items:center;
  gap:10px;
  font-size:16px;
  font-weight:600;
  margin:6px 0 16px
}
.ghost-brand img {
  width:26px;
  height:26px
}
.ghost-line {
  display:block;
  background:var(--rail);
  height:7px;
  border-radius:4px;
  width:100%
}
.ghost-line.short {
  width:72%
}
.ghost-highlight {
  height:24px;
  background:var(--hover);
  width:84%;
  margin-top:-31px
}
.extension-menu {
  position:absolute;
  right:26px;
  top:106px;
  width:360px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:0 0 16px 16px;
  box-shadow:0 8px 20px rgb(0 0 0 / 10%);
  font-family:Arial,sans-serif
}
.menu-heading {
  font-size:18px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:23px 24px 17px
}
.menu-heading .icon {
  width:18px
}
.menu-note {
  font-size:14px;
  font-weight:600;
  padding:0 24px;
  margin-bottom:8px
}
.menu-description {
  font-size:14px;
  line-height:1.5;
  color:var(--secondary);
  padding:0 24px 34px
}
.extension-row {
  display:flex;
  align-items:center;
  gap:12px;
  height:62px;
  padding:0 18px 0 24px;
  background:var(--panel)
}
.extension-row img {
  width:25px;
  height:25px
}
.extension-row>span:not(.pin-target) {
  flex:1;
  font-size:14px;
  white-space:nowrap
}
.pin-target {
  position:relative;
  width:30px;
  height:30px;
  display:grid;
  place-items:center;
  border-radius:50%;
  margin-right:9px
}
.pin-target .icon {
  width:19px;
  height:19px
}
.extension-row>.icon {
  width:18px
}
.menu-footer {
  display:flex;
  align-items:center;
  gap:12px;
  padding:18px 24px;
  font-size:14px;
  border-top:1px solid var(--border)
}
.menu-footer .icon {
  width:18px;
  height:18px
}
.pin-note {
  position:absolute;
  bottom:14px;
  right:26px;
  width:360px;
  text-align:center;
  color:var(--primary);
  font-size:14px;
  font-weight:500
}
.open-step {
  margin-top:20px
}
.open-browser .chrome-address {
  gap:16px
}
.pinned img {
  width:25px;
  height:25px
}
.start-preview {
  height:286px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  background:var(--workspace)
}
.preview-brand {
  display:flex;
  align-items:center;
  gap:8px;
  font-size:15px;
  font-weight:600;
  margin-bottom:12px
}
.preview-brand img {
  width:24px;
  height:24px
}
.preview-description {
  color:var(--secondary);
  font-size:14px;
  margin:10px 0 20px
}
.preview-drop {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
  padding:22px 32px;
  background:var(--panel);
  border:1px dashed #8c8f97;
  border-radius:16px;
  font-size:14px;
  font-weight:600
}
.preview-open {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  background:var(--panel);
  color:var(--text);
  border:1px solid var(--border);
  border-radius:8px;
  padding:8px 12px;
  font-size:16px;
  font-weight:600
}
.preview-open .icon {
  width:18px;
  height:18px
}
.finish {
  text-align:center;
  font-size:18px;
  font-weight:500;
  margin-top:28px
}
footer {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  color:var(--secondary);
  font-size:14px;
  line-height:1.5;
  margin:72px 24px 32px
}
footer img {
  width:20px;
  height:20px
}
.footer-dot {
  margin:0 3px
}
@keyframes enter {
  from {
    opacity:0;
    transform:translateY(6px)
  }
  to {
    opacity:1;
    transform:translateY(0)
  }
}
@media(max-width:720px) {
  .guide-arrow { width:150px; height:48px; --tip-x:147px; --tip-y:36px; }
  main {
    padding:28px 20px 42px
  }
  .welcome-header {
    margin-bottom:24px
  }
  h1 {
    font-size:32px;
    letter-spacing:-.8px
  }
  .intro {
    font-size:17px
  }
  .step-instructions p {
    font-size:14px;
    line-height:1.9
  }
  .chrome-tabs {
    padding:0 12px;
    gap:12px
  }
  .chrome-tab {
    width:180px
  }
  .chrome-address {
    padding:0 12px;
    gap:12px
  }
  .browser-content {
    height:356px
  }
  .ghost-page {
    display:none
  }
  .extension-menu {
    right:14px;
    max-width:calc(100% - 28px);
    width:330px
  }
  .pin-note {
    left:0;
    right:0;
    width:auto;
    bottom:14px
  }
  .open-step {
    margin-top:32px
  }
  .start-preview {
    height:285px;
    padding-top:32px
  }
  .finish {
    font-size:15px
  }
  footer {
    flex-wrap:wrap;
    margin-top:52px;
    font-size:14px
  }
  .footer-dot {
    display:none
  }
  footer>span:last-child {
    flex-basis:100%;
    text-align:center
  }
  .desktop-break {
    display:none
  }
}
@media(max-width:400px) {
  main {
    padding-left:14px;
    padding-right:14px
  }
  h1 {
    font-size:29px
  }
  .chrome-tabs .window-dots {
    display:none
  }
  .chrome-address {
    gap:10px
  }
  .back {
    display:none
  }
  .address {
    font-size:10px
  }
  .extension-menu {
    right:10px;
    max-width:calc(100% - 20px)
  }
  .menu-heading {
    padding:20px 18px 16px
  }
  .menu-note,.menu-description {
    padding-left:18px;
    padding-right:18px
  }
  .extension-row {
    padding-left:18px;
    gap:8px
  }
  .extension-row>span:not(.pin-target) {
    font-size:14px
  }
  .open-browser .chrome-address {
    gap:12px
  }
}
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after {
    animation:none!important;
    transition:none!important
  }
}