.watchfaces-page { --face-green: #b1ff54; }
.faces-eyebrow { font-size: 10px; font-weight: 750; letter-spacing: .2em; }
.watchfaces-page .face-download { display: inline-flex; align-items: center; justify-content: center; gap: 20px; border: 1px solid #caff94; background: var(--face-green); color: #142106; font-weight: 750; border-radius: 12px; padding: 14px 21px; box-shadow: 0 0 12px #9aff5360, 0 0 30px #8eff4638, inset 0 1px 0 #e1ffc3; transition: box-shadow .2s, transform .2s; }
.watchfaces-page .face-download:hover { background: #c5ff83; transform: translateY(-2px); box-shadow: 0 0 18px #a5ff65a0, 0 0 42px #8eff4660; }
.watchfaces-page .face-download:focus-visible { outline: 3px solid var(--ink); outline-offset: 5px; }
.face-download span { font-size: 20px; line-height: 1; }
.faces-collection { padding-top: 30px; }
.faces-section-heading { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: 28px; }
.faces-section-heading h2, .faces-setup h2 { font-size: clamp(26px, 3.5vw, 36px); line-height: 1.15; letter-spacing: -.045em; margin: 10px 0 0; }
.faces-section-heading > p { color: var(--ink-2); font-size: 13px; }
.watchfaces-page .watchface-grid { gap: 22px; }
.watchfaces-page .watchface-card { padding: 20px; border-radius: 26px; gap: 12px; }
.watchfaces-page .watchface-preview { height: 290px; padding: 30px; background: radial-gradient(ellipse at 50% 90%, #20251e, #080a09 70%); border: 1px solid #ffffff12; border-radius: 18px; margin-bottom: 8px; }
.watchfaces-page .watchface-preview img { width: auto; max-width: 100%; height: 100%; border-radius: 20%; box-shadow: 0 12px 25px #0008; transition: transform .25s; }
.watchface-preview:hover img { transform: scale(1.04); }
.watchfaces-page .watchface-card h3 { font-size: 22px; letter-spacing: -.035em; }
.watchfaces-page .watchface-card p { font-size: 13px; line-height: 1.65; }
.watchfaces-page .watchface-card .actions { padding-top: 16px; padding-bottom: 6px; }
.watchfaces-page .watchface-card .face-download { width: 100%; padding: 12px; font-size: 12px; gap: 10px; }
.faces-setup { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; border-top: 1px solid #8884; border-bottom: 1px solid #8884; padding: 38px 0; margin: 24px 0 52px; }
.faces-setup > div > p:last-child { color: var(--ink-2); font-size: 13px; margin-top: 16px; max-width: 370px; }
.faces-setup ol { list-style: none; counter-reset: setup; display: grid; gap: 20px; }
.faces-setup li { counter-increment: setup; display: grid; grid-template-columns: 30px 1fr; column-gap: 12px; font-size: 13px; }
.faces-setup li::before { content: "0" counter(setup); grid-row: span 2; color: var(--ink-2); font-size: 11px; padding-top: 3px; }
.faces-setup li span { color: var(--ink-2); font-size: 12px; }
@media (max-width: 760px) {
  .faces-setup { gap: 28px; }
}
@media (max-width: 600px) {
  .faces-section-heading { display: block; }
  .faces-section-heading > p { margin-top: 14px; }
  .faces-section-heading > p br { display: none; }
  .watchfaces-page .watchface-grid { grid-template-columns: 1fr; }
  .watchfaces-page .watchface-preview { height: 310px; }
  .faces-setup { grid-template-columns: 1fr; }
}