:root {
  color-scheme: dark;
  --bg: #000;
  --surface: #1c1c1e;
  --surface-raised: #2c2c2e;
  --line: #29292c;
  --text: #f5f5f7;
  --muted: #8e8e93;
  --blue: #0a84ff;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font); -webkit-font-smoothing: antialiased; }
a { color: inherit; }
h1, h2, h3, p { margin-top: 0; }

.store-header { width: min(1020px, calc(100% - 52px)); height: 64px; display: flex; align-items: center; justify-content: space-between; margin: 0 auto; border-bottom: 1px solid var(--line); }
.store-wordmark { display: inline-flex; align-items: center; gap: 9px; font-size: 14px; font-weight: 650; letter-spacing: -.02em; text-decoration: none; }
.store-mark { width: 20px; height: 20px; display: flex; align-items: end; gap: 2px; padding: 3px; border-radius: 5px; background: var(--blue); }
.store-mark i { flex: 1; border-radius: 3px 3px 1px 1px; background: #fff; }
.store-mark i:nth-child(1) { height: 45%; }
.store-mark i:nth-child(2) { height: 75%; }
.store-mark i:nth-child(3) { height: 100%; }
.store-nav { height: 100%; display: flex; align-items: center; gap: 25px; }
.store-nav a { height: 100%; display: grid; align-items: center; color: var(--muted); font-size: 12px; text-decoration: none; }
.store-nav a.store-nav__active { border-bottom: 2px solid var(--blue); color: var(--text); }
.share-button { width: 32px; height: 32px; display: grid; place-items: center; padding: 0; border: 1px solid #3a3a3c; border-radius: 50%; background: transparent; color: var(--blue); cursor: pointer; }
.share-button svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.store-page { width: min(1020px, calc(100% - 52px)); margin: 0 auto; }

.app-product { min-height: 214px; display: grid; grid-template-columns: 144px minmax(0, 1fr) 190px; gap: 25px; align-items: center; padding: 27px 0 24px; border-bottom: 1px solid var(--line); }
.product-icon { width: 128px; height: 128px; position: relative; overflow: hidden; border: 1px solid #343436; border-radius: 28px; background: #18181a; box-shadow: 0 12px 32px rgba(0,0,0,.45); }
.product-icon__paper { position: absolute; top: 23px; left: 20px; width: 58px; height: 82px; display: grid; grid-template-columns: repeat(3, 8px); grid-auto-rows: 8px; align-content: end; justify-content: center; gap: 6px; padding-bottom: 14px; border-radius: 5px; background: #f4f4f5; }
.product-icon__paper::before { position: absolute; top: 0; right: 0; left: 0; height: 15px; border-radius: 5px 5px 0 0; background: #ff4b18; content: ""; }
.product-icon__paper span { z-index: 1; border-radius: 50%; background: #343438; }
.product-icon__corner { position: absolute; top: 18px; right: 16px; width: 32px; height: 34px; border-radius: 4px; background: #ff4b18; }
.product-icon__corner::after { position: absolute; right: 7px; bottom: 6px; left: 7px; height: 2px; background: rgba(255,255,255,.72); box-shadow: 0 -6px rgba(255,255,255,.72), 0 -12px rgba(255,255,255,.72); content: ""; }
.product-copy { min-width: 0; }
.product-copy h1 { margin-bottom: 5px; font-size: clamp(23px, 3vw, 30px); font-weight: 650; letter-spacing: -.035em; line-height: 1.15; }
.product-subtitle { margin-bottom: 7px; color: var(--muted); font-size: 14px; line-height: 1.45; }
.product-developer { margin: 0; color: var(--muted); font-size: 11px; }
.product-action { display: flex; align-items: center; }
.product-action--desktop { flex-direction: column; align-items: flex-start; gap: 9px; }
.product-action--mobile { display: none; }
.download-button { min-width: 134px; min-height: 42px; display: inline-flex; align-items: center; justify-content: center; padding: 0 20px; border: 0; border-radius: 22px; background: var(--blue); color: #fff; font-size: 14px; font-weight: 650; text-decoration: none; }
.download-button[aria-disabled="true"] { cursor: default; }
.purchase-note { max-width: 170px; color: var(--muted); font-size: 10px; line-height: 1.35; }

.app-metadata { min-height: 105px; display: grid; grid-template-columns: 1fr 1fr 1.25fr 1fr; align-items: center; border-bottom: 1px solid var(--line); }
.metadata-item { min-height: 59px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 0 12px; border-right: 1px solid #242426; text-align: center; }
.metadata-item:last-child { border-right: 0; }
.metadata-label { overflow: hidden; max-width: 100%; color: var(--muted); font-size: 9px; font-weight: 650; letter-spacing: .06em; text-overflow: ellipsis; white-space: nowrap; }
.metadata-item strong { color: #d0d0d4; font-size: 21px; font-weight: 500; letter-spacing: -.035em; white-space: nowrap; }
.metadata-item .metadata-category { font-size: 14px; font-weight: 450; letter-spacing: -.02em; }
.metadata-detail { overflow: hidden; max-width: 100%; color: var(--muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.metadata-rating { display: flex; align-items: center; justify-content: center; gap: 5px; }
.rating-stars { color: #a1a1a7; font-size: 9px; letter-spacing: -1px; }
.metadata-rating small { color: var(--muted); font-size: 8px; }
.metadata-item .metadata-developer-icon { color: #a3a3aa; font-size: 19px; }

.overview { padding: 29px 0 30px; border-bottom: 1px solid var(--line); }
.section-heading { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 17px; }
.section-heading h2, .description-section h2 { margin: 0; font-size: 24px; font-weight: 650; letter-spacing: -.035em; }
.section-heading > span { color: var(--muted); font-size: 10px; }
.screenshot-rail { display: flex; gap: 16px; overflow-x: auto; padding: 2px 1px 12px; scroll-snap-type: x mandatory; scrollbar-width: none; }
.screenshot-rail::-webkit-scrollbar { display: none; }
.app-shot { height: 485px; flex: 0 0 calc((100% - 32px) / 3); min-width: 250px; overflow: hidden; padding: 18px 15px 15px; border: 1px solid #29292c; border-radius: 20px; scroll-snap-align: start; }
.app-shot--calendar { background: #eeeae4; color: #18181a; }
.app-shot--week { background: #131a32; color: #f7f7fb; }
.app-shot--notes { background: #dce8f0; color: #1d2830; }
.shot-caption { min-height: 78px; display: flex; flex-direction: column; gap: 7px; }
.shot-caption > span { font-size: 8px; font-weight: 750; letter-spacing: .11em; opacity: .64; }
.shot-caption strong { max-width: 220px; font-size: 19px; font-weight: 650; letter-spacing: -.04em; line-height: 1.17; }
.calendar-screen { height: 375px; overflow: hidden; padding: 15px 13px 0; border-radius: 13px; background: #fbfbfc; box-shadow: 0 7px 17px rgba(32,30,26,.1); }
.calendar-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; color: #212126; font-size: 14px; font-weight: 700; }
.calendar-top b { width: 23px; height: 23px; display: grid; place-items: center; border-radius: 50%; background: #f0f0f2; color: #77777f; font-size: 15px; font-weight: 400; }
.calendar-days { display: grid; grid-template-columns: repeat(5, 1fr); gap: 3px; margin-bottom: 14px; }
.calendar-days span { display: flex; flex-direction: column; align-items: center; gap: 5px; color: #85858c; font-size: 7px; }
.calendar-days em { width: 27px; height: 27px; display: grid; place-items: center; border-radius: 50%; color: #29292e; font-size: 10px; font-style: normal; }
.calendar-days .calendar-days__selected em { background: #282832; color: #fff; }
.calendar-agenda { border-top: 1px solid #ececef; }
.calendar-agenda > div { min-height: 57px; display: grid; grid-template-columns: 41px 4px 1fr; gap: 7px; align-items: start; padding-top: 12px; border-bottom: 1px solid #f0f0f2; }
.calendar-agenda time { padding-top: 2px; color: #85858c; font-size: 8px; }
.event-dot { width: 3px; height: 31px; border-radius: 3px; }
.event-dot--orange { background: #ef893c; }
.event-dot--blue { background: #4c8ee8; }
.event-dot--green { background: #64a17a; }
.event-dot--pink { background: #d65b7d; }
.calendar-agenda span { display: flex; flex-direction: column; gap: 4px; color: #29292e; font-size: 9px; font-weight: 600; }
.calendar-agenda small { color: #8b8b93; font-size: 7px; font-weight: 400; }
.calendar-tabbar { height: 36px; display: flex; justify-content: space-between; align-items: center; color: #96969d; font-size: 6px; }
.calendar-tabbar__active { color: #4189dc; }
.week-screen { min-height: 375px; padding: 14px 13px; border: 1px solid rgba(255,255,255,.08); border-radius: 13px; background: #f8f8fa; color: #25252a; box-shadow: 0 7px 17px rgba(0,0,0,.15); }
.week-top { display: flex; justify-content: space-between; margin-bottom: 15px; font-size: 10px; font-weight: 650; }
.week-top b { color: #7d7d85; letter-spacing: 2px; }
.week-event { position: relative; display: flex; flex-direction: column; gap: 7px; min-height: 130px; padding: 14px 12px 12px 15px; border-radius: 9px; background: #eef3fb; }
.week-event__time { color: #7b7c84; font-size: 7px; }
.week-event strong { font-size: 15px; font-weight: 650; }
.week-event > span:last-of-type { color: #85858d; font-size: 8px; }
.week-event__color { position: absolute; top: 12px; bottom: 12px; left: 0; width: 3px; border-radius: 3px; background: #e2784b; }
.week-row { min-height: 46px; display: grid; grid-template-columns: 1fr 1.3fr 10px; align-items: center; border-bottom: 1px solid #ededf0; font-size: 8px; }
.week-row span { color: #85858c; }
.week-row strong { font-size: 8px; font-weight: 500; }
.week-row b { color: #a2a2a9; font-size: 13px; font-weight: 400; }
.tiny-dot { width: 7px; height: 7px; display: inline-block; margin-right: 3px; border-radius: 50%; background: #4b8ce1; }
.week-note { padding: 14px 0 0; }
.week-note > span { color: #93939b; font-size: 7px; font-weight: 700; letter-spacing: .1em; }
.week-note p { margin: 6px 0 0; color: #5d5d65; font-size: 8px; line-height: 1.5; }
.notes-screen { min-height: 375px; padding: 14px 12px; border-radius: 13px; background: #f8fafb; box-shadow: 0 7px 17px rgba(34,48,57,.1); }
.notes-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; font-size: 12px; font-weight: 700; }
.notes-top b { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: #e7edf2; color: #557f98; font-size: 15px; font-weight: 400; }
.note-card { min-height: 155px; display: flex; flex-direction: column; gap: 10px; margin-bottom: 11px; padding: 14px 12px; border: 1px solid #e7ebee; border-radius: 9px; background: #fff; }
.note-card__date { color: #8d98a0; font-size: 7px; font-weight: 650; letter-spacing: .07em; }
.note-card strong { font-size: 14px; font-weight: 650; }
.note-card p { margin: 0; color: #737b82; font-size: 8px; line-height: 1.5; }
.note-card > i { width: 91%; height: 3px; border-radius: 3px; background: #edf0f2; }
.note-card > i:last-child { width: 67%; }
.note-card--small { min-height: 100px; }
.note-card--small strong { font-size: 11px; }
.rail-hint { display: none; }

.description-section { max-width: 760px; padding: 29px 0 33px; border-bottom: 1px solid var(--line); }
.description-section h2 { margin-bottom: 12px; }
.description-section > p { max-width: 720px; margin-bottom: 10px; color: #d0d0d4; font-size: 14px; line-height: 1.65; }
.description-section .description-secondary { margin: 14px 0 0; color: var(--muted); font-size: 10px; }
.store-footer { min-height: 65px; display: flex; align-items: center; justify-content: space-between; gap: 14px; color: var(--muted); font-size: 10px; }
.download-button:focus-visible, .store-wordmark:focus-visible, .store-nav a:focus-visible, .share-button:focus-visible { outline: 2px solid #78b7ff; outline-offset: 4px; }

@media (max-width: 720px) {
  .store-header, .store-page { width: calc(100% - 40px); }
  .app-product { grid-template-columns: 115px minmax(0, 1fr); gap: 18px; padding-block: 23px; }
  .product-icon { width: 105px; height: 105px; border-radius: 24px; transform: scale(.9); transform-origin: top left; }
  .product-icon__paper { top: 19px; left: 17px; transform: scale(.84); transform-origin: top left; }
  .product-icon__corner { top: 16px; right: 13px; transform: scale(.88); transform-origin: top right; }
  .product-action--desktop { display: none; }
  .product-action--mobile { display: flex; grid-column: 2; align-items: center; gap: 10px; margin-top: 0; }
  .download-button { min-width: 115px; min-height: 38px; padding-inline: 17px; font-size: 13px; }
  .purchase-note { max-width: 145px; font-size: 9px; }
  .app-metadata { min-height: 100px; grid-template-columns: repeat(4, minmax(138px, 1fr)); overflow-x: auto; scrollbar-width: none; }
  .app-metadata::-webkit-scrollbar { display: none; }
  .app-shot { height: 450px; flex-basis: 265px; }
  .calendar-screen, .week-screen, .notes-screen { height: 342px; min-height: 342px; }
}

@media (max-width: 480px) {
  .store-header, .store-page { width: calc(100% - 32px); }
  .store-header { height: 57px; }
  .store-wordmark { font-size: 12px; }
  .store-nav { gap: 15px; }
  .store-nav a { font-size: 10px; }
  .share-button { width: 29px; height: 29px; }
  .app-product { grid-template-columns: 78px minmax(0, 1fr); gap: 13px; padding: 20px 0 17px; }
  .product-icon { width: 78px; height: 78px; border-radius: 19px; transform: none; }
  .product-icon__paper { top: 13px; left: 13px; transform: scale(.64); }
  .product-icon__corner { top: 11px; right: 9px; transform: scale(.7); }
  .product-copy h1 { margin-bottom: 4px; font-size: 19px; line-height: 1.15; }
  .product-subtitle { margin-bottom: 5px; font-size: 10px; }
  .product-developer { font-size: 9px; }
  .product-action--mobile { gap: 8px; margin-top: 7px; }
  .download-button { min-width: 100px; min-height: 34px; padding-inline: 14px; font-size: 11px; }
  .purchase-note { max-width: 155px; font-size: 8px; }
  .app-metadata { min-height: 92px; grid-template-columns: repeat(4, minmax(115px, 1fr)); }
  .metadata-item { min-height: 55px; padding-inline: 8px; }
  .metadata-label { font-size: 7px; }
  .metadata-item strong { font-size: 18px; }
  .metadata-item .metadata-category { font-size: 11px; }
  .metadata-detail { font-size: 8px; }
  .overview { padding-block: 24px 23px; }
  .section-heading h2, .description-section h2 { font-size: 21px; }
  .section-heading > span { font-size: 8px; }
  .screenshot-rail { gap: 12px; margin-right: -16px; padding-right: 16px; }
  .app-shot { height: 430px; flex-basis: 77vw; min-width: 248px; padding: 16px 13px 13px; border-radius: 17px; }
  .shot-caption { min-height: 71px; }
  .shot-caption strong { font-size: 17px; }
  .calendar-screen, .week-screen, .notes-screen { height: 325px; min-height: 325px; }
  .description-section { padding-block: 23px 26px; }
  .description-section > p { font-size: 12px; }
  .store-footer { align-items: flex-start; flex-direction: column; justify-content: center; gap: 6px; padding-block: 15px; font-size: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}