.guide-page {
  --guide-link: #087568;
  overflow-x: visible;
}

.guide-page :is(h1, h2, h3), .guide-kicker { overflow-wrap: anywhere; }

.guide-main a:hover, .guide-page .site-footer a:hover { color: var(--guide-link); }
.guide-main :focus-visible, .guide-page .site-footer :focus-visible { outline: 2px solid var(--guide-link); outline-offset: calc(0.25 * var(--size-unit)); }
.guide-page .site-footer { width: min(calc(100% - var(--desktop-gutter, 20px) * 2), var(--desktop-content-width, calc(66.25 * var(--size-unit)))); }
.guide-page .site-footer { margin-top: var(--space-18); padding: var(--space-6) 0; }
.guide-main { width: min(calc(100% - var(--desktop-gutter, 20px) * 2), var(--desktop-content-width, calc(66.25 * var(--size-unit)))); margin: 0 auto; }
.guide-breadcrumb { margin: calc(1.875 * var(--size-unit)) 0 0; font-size: calc(0.85 * var(--size-unit)); color: var(--muted); }
.guide-breadcrumb ol { display: flex; flex-wrap: wrap; gap: calc(0.375 * var(--size-unit)) calc(0.625 * var(--size-unit)); list-style: none; padding: 0; margin: 0; }
.guide-breadcrumb li + li::before { content: '/'; padding-right: calc(0.625 * var(--size-unit)); color: var(--muted); }
.guide-breadcrumb a { text-decoration: none; }
.guide-hero { max-width: var(--article-max-width); padding: var(--space-10) 0 var(--space-8); }
.guide-kicker { color: var(--guide-link); font: 700 calc(0.78 * var(--size-unit))/1.5 ui-monospace, 'SF Mono', monospace; text-transform: uppercase; letter-spacing: .09em; margin: 0 0 calc(0.875 * var(--size-unit)); }
.guide-page h1 { font-size: var(--type-guide-title); line-height: 1.1; letter-spacing: -.035em; text-wrap: balance; }
.guide-lead { max-width: var(--article-max-width); margin: var(--space-5) 0 0; font-size: var(--type-guide-lead); line-height: 1.65; }
.guide-meta { color: var(--muted); font-size: calc(0.85 * var(--size-unit)); line-height: 1.6; margin: calc(0.875 * var(--size-unit)) 0 0; }
.guide-layout { display: grid; grid-template-columns: calc(12.5 * var(--size-unit)) minmax(0, var(--article-max-width)); gap: var(--space-12); align-items: start; }
.guide-requirements { grid-column: 2; padding: calc(1.375 * var(--size-unit)) calc(1.625 * var(--size-unit)); border: 1px solid var(--line); border-radius: calc(1 * var(--size-unit)); background: rgba(255,255,255,.55); }
.guide-page .guide-requirements h2 { font-size: calc(1.1 * var(--size-unit)); margin: 0 0 var(--space-3); }
.guide-requirements ul { padding-left: 1.25em; margin: 0; }
.guide-requirements li { margin: var(--space-2) 0; line-height: 1.6; }
.guide-requirements p { margin: calc(0.875 * var(--size-unit)) 0 0; font-size: calc(0.94 * var(--size-unit)); line-height: 1.6; }
.guide-contents { grid-column: 1; grid-row: 1 / span 2; position: sticky; top: calc(1.5 * var(--size-unit)); max-height: calc(100svh - var(--space-12)); overflow-y: auto; font-size: calc(0.88 * var(--size-unit)); }
.guide-contents summary { font-weight: 700; padding: var(--space-2) calc(0.625 * var(--size-unit)); cursor: pointer; }
.guide-contents ul { list-style: none; padding: 0; margin: calc(0.625 * var(--size-unit)) 0 0; }
.guide-contents a { display: block; padding: var(--space-2) calc(0.625 * var(--size-unit)); line-height: 1.4; color: var(--muted); text-decoration: none; border-left: 2px solid transparent; }
.guide-contents .sub a { padding-left: var(--space-6); font-size: calc(0.84 * var(--size-unit)); }
.guide-contents a:hover { background: rgba(17,217,187,.06); }
.guide-contents a[aria-current="location"] { color: var(--guide-link); border-color: var(--guide-link); background: rgba(17,217,187,.08); font-weight: 650; }
.guide-article { grid-column: 2; min-width: 0; font-size: calc(1.0625 * var(--size-unit)); line-height: 1.7; }
.guide-article section + section { border-top: 1px solid var(--line); margin-top: var(--space-10); padding-top: var(--space-9); }
.guide-page h2 { font-size: var(--type-guide-section); line-height: 1.25; letter-spacing: -.02em; margin: 0 0 var(--space-4); text-wrap: balance; }
.guide-page h3 { font-size: calc(1.2 * var(--size-unit)); line-height: 1.3; margin: var(--space-8) 0 var(--space-3); }
.guide-page [id] { scroll-margin-top: var(--space-6); }
.guide-article p { margin: 0 0 var(--space-4); }
.guide-article ul, .guide-article ol { padding-left: 1.3em; margin: 0 0 var(--space-5); }
.guide-article li { padding-left: 3px; margin: var(--space-2) 0; }
.guide-article a, .guide-requirements a { text-decoration-color: currentColor; color: var(--guide-link); }
.guide-page code, .guide-page kbd { font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; font-size: .88em; }
.guide-page :not(pre) > code { background: rgba(32,35,52,.055); padding: .1em .3em; border-radius: calc(0.25 * var(--size-unit)); overflow-wrap: anywhere; }
.guide-page kbd { border: 1px solid var(--line); border-bottom-width: 2px; border-radius: calc(0.25 * var(--size-unit)); padding: .1em .3em; white-space: nowrap; }
.guide-step { color: var(--guide-link); font-size: .82em; font-weight: 600; margin-right: .35em; }
.guide-note { border-left: 3px solid var(--guide-link); padding: calc(0.875 * var(--size-unit)) calc(1.125 * var(--size-unit)); margin: var(--space-6) 0; background: rgba(17,217,187,.055); border-radius: 0 calc(0.625 * var(--size-unit)) calc(0.625 * var(--size-unit)) 0; font-size: calc(0.96 * var(--size-unit)); }
.guide-note p:last-child { margin-bottom: 0; }
.guide-optional { margin: var(--space-3) 0 var(--space-5); border-top: 1px solid var(--line); }
.guide-optional summary { font-weight: 650; line-height: 1.5; padding: calc(0.625 * var(--size-unit)) 0; cursor: pointer; }
.guide-optional[open] summary { padding-bottom: var(--space-1); }
.guide-optional > p { font-size: calc(0.96 * var(--size-unit)); }
.guide-figure { margin: calc(1.625 * var(--size-unit)) 0; }
.guide-figure img { display: block; width: 100%; height: auto; border: 1px solid var(--line); border-radius: calc(0.875 * var(--size-unit)); background: #272735; }
.guide-figure figcaption { color: var(--muted); font-size: calc(0.85 * var(--size-unit)); line-height: 1.55; margin-top: calc(0.625 * var(--size-unit)); }
.guide-figure.small { max-width: var(--guide-image-small); }
.guide-figure.medium { max-width: var(--guide-image-medium); }
.guide-figure.compact { max-width: calc(32.5 * var(--size-unit)); }
.guide-figure.large { max-width: var(--guide-image-large); }
.guide-figure.phone { max-width: calc(20.625 * var(--size-unit)); margin-inline: auto; }
.guide-figure.pad { max-width: calc(35 * var(--size-unit)); margin-inline: auto; }
.guide-figure-pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); align-items: start; }
.guide-figure-pair .guide-figure { margin: calc(0.625 * var(--size-unit)) 0 var(--space-6); }
.guide-code { position: relative; margin: var(--space-5) 0 var(--space-6); border: 1px solid #d5e3de; border-radius: calc(0.75 * var(--size-unit)); overflow: hidden; background: #f0f6f3; font-size: calc(0.88 * var(--size-unit)); }
.guide-code-bar { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); padding: var(--space-2) calc(0.875 * var(--size-unit)); border-bottom: 1px solid #d5e3de; }
.guide-code-label { flex: 1 1 calc(11.25 * var(--size-unit)); line-height: 1.5; color: #485952; font-size: calc(0.8 * var(--size-unit)); }
.guide-code button { font: inherit; font-size: calc(0.8 * var(--size-unit)); color: var(--ink); background: #fff; border: 1px solid #b7c9c1; border-radius: calc(0.375 * var(--size-unit)); min-height: calc(2.25 * var(--size-unit)); padding: calc(0.375 * var(--size-unit)) var(--space-3); cursor: pointer; }
.guide-code button:hover { border-color: var(--guide-link); }
.guide-code button:disabled { cursor: wait; }
.guide-code [role="status"] { font-size: calc(0.8 * var(--size-unit)); color: var(--guide-link); }
.guide-code pre { overflow-x: auto; margin: 0; padding: var(--space-4); line-height: 1.65; tab-size: 2; white-space: pre-wrap; overflow-wrap: anywhere; }
.guide-code pre code { font-size: calc(0.88 * var(--size-unit)); }
.guide-table { width: 100%; border-collapse: collapse; font-size: calc(0.94 * var(--size-unit)); line-height: 1.55; margin: var(--space-5) 0; }
.guide-table caption { text-align: left; font-weight: 650; margin-bottom: calc(0.625 * var(--size-unit)); }
.guide-table th, .guide-table td { text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); padding: calc(0.8125 * var(--size-unit)) var(--space-3) calc(0.8125 * var(--size-unit)) 0; overflow-wrap: anywhere; }
.guide-table thead th { font-size: calc(0.8 * var(--size-unit)); color: var(--muted); }
.guide-table tbody th { width: 32%; font-weight: 650; }
.guide-table td:last-child { padding-right: 0; }
.guide-jump-links { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); }
.guide-jump-links a { padding-block: calc(0.375 * var(--size-unit)); font-weight: 650; }
.guide-verification { color: var(--muted); font-size: calc(0.85 * var(--size-unit)); line-height: 1.6; }
.guide-related { padding: var(--space-6); border: 1px solid var(--line); border-radius: calc(1 * var(--size-unit)); background: rgba(255,255,255,.55); margin-top: var(--space-7); }
.guide-related h2 { font-size: calc(1.3 * var(--size-unit)); }
.guide-related p { margin-bottom: var(--space-4); }
.guide-related .appstore-badge { margin-top: var(--space-3); }
.guide-related .appstore-badge img { height: calc(2.75 * var(--size-unit)); width: auto; }
.guide-index .guide-hero { max-width: calc(45 * var(--size-unit)); padding-bottom: var(--space-10); }
.guide-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, calc(18 * var(--size-unit))), 1fr)); gap: calc(1.625 * var(--size-unit)); }
.guide-card { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: calc(1.25 * var(--size-unit)); overflow: hidden; background: rgba(255,255,255,.6); }
.guide-card-visual { height: calc(13.75 * var(--size-unit)); padding: var(--space-7) var(--space-8) 0; overflow: hidden; background: #dcefe9; }
.guide-card-visual img { width: 100%; height: auto; border-radius: calc(0.625 * var(--size-unit)) calc(0.625 * var(--size-unit)) 0 0; box-shadow: 0 calc(0.625 * var(--size-unit)) calc(1.875 * var(--size-unit)) #20233420; }
.guide-card-visual.bell { display: grid; align-items: center; padding-bottom: var(--space-7); background: #e6e9f0; }
.guide-card-visual.bell img { border-radius: calc(0.875 * var(--size-unit)); }
.guide-card-copy { flex: 1; display: flex; flex-direction: column; padding: var(--space-7); }
.guide-card-copy h2 { font-size: var(--type-guide-card); }
.guide-card-copy p { color: var(--muted); line-height: 1.65; margin: 0 0 var(--space-6); }
.guide-card-copy a { margin-top: auto; color: var(--guide-link); font-weight: 650; }
.guide-index-reference { margin-top: var(--space-9); color: var(--muted); line-height: 1.65; }
.guide-not-found { max-width: calc(42.5 * var(--size-unit)); padding: var(--space-16) 0 var(--space-24); }
.guide-not-found p { line-height: 1.65; }

@media (min-width: 1024px) {
  .guide-card-copy p { max-width: 60ch; }
}

@media (min-width: 960px) {
  .guide-contents summary { list-style: none; }
  .guide-contents summary::-webkit-details-marker { display: none; }
}

@media (max-width: 959px) {
  .guide-main { max-width: calc(45 * var(--size-unit)); }
  .guide-layout { display: flex; flex-direction: column; gap: calc(1.625 * var(--size-unit)); }
  .guide-layout > * { width: 100%; }
  .guide-contents { position: static; max-height: none; padding: var(--space-2) calc(0.625 * var(--size-unit)); border: 1px solid var(--line); border-radius: calc(0.75 * var(--size-unit)); }
  .guide-contents summary { min-height: calc(2.75 * var(--size-unit)); display: list-item; padding: calc(0.625 * var(--size-unit)); margin-left: calc(0.875 * var(--size-unit)); }
  .guide-contents a { padding-block: var(--space-3); }
  .guide-hero { padding-top: var(--space-7); }
}

@media (max-width: 600px) {
  .guide-page .site-footer, .guide-main { width: calc(100% - 32px); }
  .guide-breadcrumb { margin-top: var(--space-6); font-size: calc(0.78 * var(--size-unit)); }
  .guide-breadcrumb li:last-child { display: none; }
  .guide-article { font-size: calc(1 * var(--size-unit)); }
  .guide-requirements { padding: calc(1.125 * var(--size-unit)); }
  .guide-figure-pair { grid-template-columns: minmax(0, 1fr); }
  .guide-figure-pair .guide-figure { width: min(100%, calc(22.5 * var(--size-unit))); margin-inline: auto; }
  .guide-table { font-size: calc(0.86 * var(--size-unit)); }
  .guide-table tbody th { width: 35%; }
  .guide-card-visual { height: calc(11.25 * var(--size-unit)); }
  .guide-card-copy { padding: var(--space-6); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}