:root {
  color-scheme: light;
  --ink: #151b27;
  --muted: #596273;
  --blue: #2368a9;
  --blue-pale: #edf6fb;
  --rose-pale: #fff2f1;
  --red: #d52b30;
  --line: #dce6ee;
  --radius: 28px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: #fff; line-height: 1.7; }
img { display: block; max-width: 100%; }
picture { display: block; }
a { color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid #1473c9; outline-offset: 4px; border-radius: 6px; }

.skip-link { position: fixed; z-index: 100; top: 10px; left: 10px; padding: 10px 16px; background: #fff; transform: translateY(-160%); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.skip-link:focus { transform: translateY(0); }
.site-header { position: sticky; z-index: 20; top: 0; display: flex; align-items: center; justify-content: space-between; min-height: 76px; padding: 10px clamp(20px, 5vw, 76px); border-bottom: 1px solid rgba(220,230,238,.8); background: rgba(255,255,255,.94); backdrop-filter: blur(16px); }
.brand { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-size: 1.18rem; font-weight: 850; text-decoration: none; }
.brand img { width: 42px; height: 42px; object-fit: contain; }
.site-nav { display: flex; gap: clamp(4px, 2vw, 22px); }
.site-nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 6px 11px; color: var(--muted); font-size: .94rem; font-weight: 700; text-decoration: none; border-bottom: 2px solid transparent; }
.site-nav a:hover, .site-nav a.is-active { color: var(--blue); border-bottom-color: var(--blue); }

.section { width: min(1320px, calc(100% - 48px)); margin-inline: auto; }
.hero { position: relative; isolation: isolate; display: flex; align-items: center; width: 100%; min-height: calc(100vh - 76px); margin-inline: 0; padding-block: clamp(64px, 8vw, 118px); overflow: hidden; }
.hero::after { content: ""; position: absolute; z-index: 1; inset: 0; pointer-events: none; background: linear-gradient(to right, #fff 0%, rgba(255,255,255,.98) 32%, rgba(255,255,255,.86) 46%, rgba(255,255,255,.3) 67%, transparent 82%); }
.hero-copy { position: relative; z-index: 2; width: min(1320px, 100%); max-width: none; margin-inline: auto; padding-inline: clamp(24px, 5vw, 76px); }
.eyebrow { margin: 0 0 12px; color: var(--blue); font-size: .78rem; font-weight: 850; letter-spacing: .13em; text-transform: uppercase; }
h1, h2, h3 { margin-top: 0; line-height: 1.13; letter-spacing: -.035em; }
h1 { max-width: 13ch; margin-bottom: 24px; font-size: clamp(3rem, 5vw, 5.2rem); font-weight: 950; }
h2 { font-size: clamp(2.2rem, 4vw, 4.1rem); font-weight: 920; }
h3 { font-size: clamp(1.65rem, 2.4vw, 2.4rem); }
.hero-subtitle { margin: 0 0 28px; color: var(--blue); font-size: clamp(1.35rem, 2vw, 2rem); font-weight: 850; }
.hero-copy > p:not(.eyebrow):not(.hero-subtitle) { max-width: 58ch; color: var(--muted); font-size: 1.06rem; }
.preserve-lines { white-space: pre-line; }
.hero-emphasis { display: block; margin: 4px 0 22px; color: var(--red); font-size: clamp(3.8rem, 7vw, 7rem); font-weight: 950; line-height: .95; letter-spacing: -.07em; }
.hero-closing { color: var(--ink) !important; font-weight: 700; }
.hero-art { position: absolute; z-index: 0; inset: 0; }
.hero-art picture { width: 100%; height: 100%; }
.hero-art img { width: 100%; height: 100%; object-fit: cover; object-position: right center; }

.time-section { position: relative; display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(340px, .88fr); align-items: center; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--radius); background: #f5fafd; }
.time-art { position: absolute; z-index: 0; inset: 0; }
.time-art picture { width: 100%; height: 100%; }
.time-art img { width: 100%; height: 100%; object-fit: cover; object-position: center; mix-blend-mode: multiply; }
.time-copy { position: relative; z-index: 1; grid-column: 2; align-self: stretch; display: flex; flex-direction: column; justify-content: center; padding: clamp(36px, 6vw, 80px); background: rgba(255,255,255,.82); }
.time-copy h2 { max-width: 10ch; }
.time-copy p { color: #252c38; font-size: 1.04rem; }
.time-subtitle { order: 0; margin-top: -10px; font-weight: 800; }
.time-copy .time-close { font-weight: 750; }

.counter-section { margin-block: clamp(80px, 10vw, 150px); text-align: center; }
.counter-section > p { margin-bottom: 18px; color: var(--muted); font-weight: 700; }
.counter { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: center; gap: clamp(26px, 5vw, 70px); perspective: 900px; }
.flip-group { display: grid; justify-items: center; gap: 12px; }
.flip-digits { display: flex; gap: clamp(4px, .7vw, 10px); }
.flip-digit { position: relative; display: block; width: clamp(42px, 6vw, 78px); height: clamp(62px, 9vw, 112px); border-radius: 9px; color: #f4f4f4; background: #26282c; box-shadow: 0 3px 0 #111216, 0 12px 22px rgba(13,20,28,.26); font-size: clamp(3rem, 7vw, 6.4rem); font-weight: 760; font-variant-numeric: tabular-nums; line-height: 1; }
.flip-digit::after { content: ""; position: absolute; z-index: 5; top: 50%; right: 0; left: 0; height: 1px; background: rgba(0,0,0,.72); box-shadow: 0 1px 0 rgba(255,255,255,.08); }
.flip-face, .flip-leaf { position: absolute; inset: 0; display: grid; place-items: center; overflow: hidden; border-radius: 9px; backface-visibility: hidden; }
.flip-face.top, .flip-leaf-old { clip-path: inset(0 0 50% 0); background: linear-gradient(#35383d, #2b2d31); }
.flip-face.bottom, .flip-leaf-new { clip-path: inset(50% 0 0 0); background: linear-gradient(#24262a, #303237); }
.flip-leaf { z-index: 4; transform-style: preserve-3d; }
.flip-digit.is-flipping .flip-leaf-old { transform-origin: center; animation: flip-top 300ms cubic-bezier(.45,0,.7,.45) forwards; }
.flip-digit.is-flipping .flip-leaf-new { transform: rotateX(90deg); transform-origin: center; animation: flip-bottom 300ms 290ms cubic-bezier(.2,.65,.35,1) forwards; }
.flip-label { color: var(--blue); font-size: clamp(1rem, 1.7vw, 1.35rem); font-weight: 850; }
@keyframes flip-top { to { transform: rotateX(-90deg); } }
@keyframes flip-bottom { to { transform: rotateX(0); } }

.download, .instructions { padding-block: clamp(80px, 9vw, 136px); }
.download { width: 100%; padding-inline: max(24px, calc((100% - 1200px) / 2)); background: var(--blue-pale); }
.section-heading { max-width: 700px; margin-bottom: 48px; }
.section-heading h2 { margin-bottom: 0; }
.instruction-heading { max-width: 920px; }
.instruction-intro { margin: 24px 0 0; color: var(--muted); font-size: 1.08rem; }
.instruction-quote { margin: 28px 0 0; padding: 22px 26px; border-left: 5px solid var(--blue); border-radius: 0 16px 16px 0; color: var(--ink); background: var(--blue-pale); font-size: clamp(1.08rem, 1.8vw, 1.35rem); font-weight: 850; }
.download-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.download-card { padding: clamp(30px, 4vw, 54px); border: 1px solid #d7e8f3; border-radius: 24px; background: #fff; }
.platform-icon { display: block; width: 58px; height: 58px; margin-bottom: 28px; padding: 14px; border-radius: 16px; fill: #fff; background: var(--blue); }
.platform-icon.apple { fill: #fff; background: var(--ink); }
.platform-icon.github { fill: #fff; background: #24292f; }
.download-card h3 { margin-bottom: 8px; }
.download-card p { color: var(--muted); }
.download-action { min-width: 150px; min-height: 48px; margin-top: 16px; padding: 10px 18px; border: 0; border-radius: 999px; color: #66707c; background: #e5e9ed; font: inherit; font-weight: 800; cursor: not-allowed; }
.download-action.is-enabled { display: inline-flex; align-items: center; justify-content: center; color: #fff; background: var(--blue); text-decoration: none; cursor: pointer; }
.download-action.is-enabled:hover { background: #18588f; }

.instruction-block { display: grid; grid-template-columns: minmax(0, .82fr) minmax(420px, 1.18fr); align-items: center; gap: clamp(40px, 7vw, 96px); margin-block: clamp(72px, 9vw, 132px); padding: clamp(26px, 4vw, 56px); border-radius: var(--radius); background: #f7fafc; }
.advanced-block { grid-template-columns: minmax(420px, 1.18fr) minmax(0, .82fr); background: var(--rose-pale); }
.steps { padding-left: 1.35em; }
.steps li { margin-block: 12px; padding-left: 8px; }
.steps li::marker { color: var(--blue); font-weight: 900; }
.screenshot-gallery { display: grid; gap: 18px; }
.screenshot-frame picture { width: 100%; }
.screenshot-frame { margin: 0; padding: 12px; border: 1px solid var(--line); border-radius: 20px; background: #fff; box-shadow: 0 22px 60px rgba(37,69,96,.11); }
.screenshot-frame img { width: 100%; border-radius: 12px; background: #f1f4f7; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; }
.screenshot-frame .panel-image { object-fit: contain; background: #222; }
.screenshot-frame figcaption { padding: 10px 6px 0; color: var(--muted); font-size: .83rem; }
.notice { display: grid; grid-template-columns: auto 1fr; gap: 22px; padding: clamp(28px, 5vw, 54px); border: 1px solid #f1d8d6; border-radius: var(--radius); background: var(--rose-pale); }
.notice-mark { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; color: #fff; background: var(--red); font-size: 1.5rem; font-weight: 950; }
.notice h3 { margin-bottom: 8px; }
.permission-list { display: flex; flex-wrap: wrap; gap: 10px; padding: 0; list-style: none; }
.permission-list li { padding: 8px 14px; border: 1px solid #efcfcc; border-radius: 999px; background: #fff; font-weight: 750; }
.window-position-warning { max-width: 800px; margin: 20px 0 0; padding-top: 18px; border-top: 1px solid #efcfcc; color: #7f1d1d; font-weight: 780; }
.faq-section, .author-section { padding-block: clamp(72px, 9vw, 126px); }
.faq-section .section-heading { margin-bottom: 28px; }
.faq-list { display: grid; gap: 14px; }
.faq-item { overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: #fff; box-shadow: 0 12px 32px rgba(37,69,96,.06); }
.faq-item summary { position: relative; min-height: 64px; padding: 20px 64px 20px 24px; list-style: none; font-size: 1.04rem; font-weight: 850; cursor: pointer; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; position: absolute; top: 50%; right: 24px; color: var(--blue); font-size: 1.5rem; transform: translateY(-50%); }
.faq-item[open] summary::after { content: "−"; }
.faq-item p { margin: 0; padding: 0 24px 24px; color: var(--muted); }
.author-section { border-top: 1px solid var(--line); }
.author-card { display: grid; grid-template-columns: 180px minmax(0, 1fr); align-items: start; gap: clamp(28px, 5vw, 60px); padding: clamp(28px, 5vw, 58px); border: 1px solid #d7e8f3; border-radius: var(--radius); background: linear-gradient(135deg, var(--blue-pale), #fff 68%); box-shadow: 0 24px 70px rgba(35,104,169,.12); }
.author-avatar { width: 160px; height: 160px; border: 6px solid #fff; border-radius: 50%; object-fit: cover; box-shadow: 0 16px 38px rgba(25,61,94,.2); }
.author-copy h2 { margin-bottom: 10px; font-size: clamp(2rem, 3.4vw, 3.2rem); }
.author-copy h3 { margin: 30px 0 12px; font-size: 1.08rem; letter-spacing: 0; }
.author-experience { margin: 0; color: var(--blue); font-weight: 820; }
.author-projects { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.author-projects a { color: var(--blue); font-weight: 800; text-underline-offset: 4px; }
.author-contact { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 28px; margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--line); }
.author-contact p { margin: 0; }
.author-contact a { color: var(--blue); }
.author-invitation { margin: 18px 0 0; color: var(--muted); }
.author-threads { margin: 8px 0 0; color: var(--muted); }
.author-threads a { color: var(--blue); }
.site-footer { padding: 44px 24px; color: var(--muted); text-align: center; border-top: 1px solid var(--line); }

@media (max-width: 1024px) {
  .time-section { grid-template-columns: 1fr 1fr; min-height: 600px; }
  .instruction-block, .advanced-block { grid-template-columns: 1fr 1fr; gap: 36px; }
  .download-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .git-card { grid-column: 1 / -1; }
}

@media (max-width: 768px) {
  .site-header { align-items: flex-start; padding-inline: 18px; }
  .brand span { display: none; }
  .site-nav { gap: 0; }
  .site-nav a { padding-inline: 9px; font-size: .83rem; }
  .section:not(.hero) { width: min(100% - 32px, 680px); }
  .hero { width: 100%; padding-block: 70px; }
  .hero-copy { padding-inline: clamp(20px, 6vw, 42px); }
  .hero-art img { object-position: 68% center; }
  .hero::after { background: linear-gradient(to bottom, rgba(255,255,255,.94) 0%, rgba(255,255,255,.72) 56%, rgba(255,255,255,.92) 100%), linear-gradient(to right, #fff 0%, rgba(255,255,255,.86) 54%, transparent 100%); }
  h1 { max-width: 15ch; }
  .time-section { grid-template-columns: 1fr; aspect-ratio: auto; }
  .time-art { position: relative; aspect-ratio: 16 / 9; }
  .time-copy { grid-column: 1; padding: 34px 26px 42px; background: #fff; }
  .time-copy h2 { max-width: 13ch; }
  .download-grid { grid-template-columns: 1fr; }
  .git-card { grid-column: auto; }
  .instruction-block, .advanced-block { grid-template-columns: 1fr; padding: 26px 20px; }
  .advanced-block .screenshot-gallery { order: 2; }
  .author-card { grid-template-columns: 1fr; }
  .author-avatar { width: 132px; height: 132px; }
}

@media (max-width: 420px) {
  .site-header { min-height: 68px; }
  .brand img { width: 38px; height: 38px; }
  .site-nav a { padding-inline: 7px; font-size: .77rem; }
  .hero { min-height: calc(100svh - 68px); }
  h1 { font-size: 2.7rem; }
  h2 { font-size: 2.3rem; }
  .hero-emphasis { font-size: 4.3rem; }
  .counter { gap: 28px; }
  .flip-digit { width: 42px; height: 62px; font-size: 3.1rem; }
  .notice { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .flip-digit.is-flipping .flip-leaf-old, .flip-digit.is-flipping .flip-leaf-new { animation: none !important; }
}