:root {
  color-scheme: dark;
  --ink: #f2f3e8;
  --muted: #a3afa7;
  --background: #101713;
  --surface: #17201b;
  --surface-raised: #1e2923;
  --line: #344039;
  --acid: #d3f36b;
  --coral: #ff8069;
  --focus: #8ed8ff;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  min-width: 320px;
  scroll-behavior: smooth;
  background: var(--background);
}

body {
  min-height: 100vh;
  margin: 0;
  color: var(--ink);
  background: var(--background);
}

button,
textarea,
input {
  font: inherit;
}

button,
.file-picker {
  -webkit-tap-highlight-color: transparent;
}

a {
  color: inherit;
  text-underline-offset: 0.25em;
}

.masthead,
main,
footer {
  width: min(1180px, calc(100% - 2rem));
  margin-inline: auto;
}

.masthead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 5rem;
  border-bottom: 1px solid var(--line);
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  text-decoration: none;
}

.wordmark span {
  display: grid;
  width: 2.25rem;
  aspect-ratio: 1;
  place-items: center;
  color: var(--background);
  background: var(--acid);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.72rem;
}

.masthead p {
  margin: 0;
  color: var(--muted);
  font-size: 0.82rem;
}

.status-dot {
  display: inline-block;
  width: 0.55rem;
  aspect-ratio: 1;
  margin-right: 0.4rem;
  border-radius: 50%;
  background: var(--acid);
  box-shadow: 0 0 0 0.25rem rgb(211 243 107 / 12%);
}

main {
  padding-bottom: 5rem;
}

.hero {
  padding: clamp(4rem, 10vw, 8rem) 0 clamp(3rem, 8vw, 6rem);
}

.kicker,
.section-number {
  margin: 0 0 1rem;
  color: var(--acid);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1 {
  max-width: 12ch;
  margin-bottom: 1.5rem;
  font-size: clamp(3.3rem, 10vw, 8.5rem);
  font-weight: 780;
  letter-spacing: -0.075em;
  line-height: 0.88;
}

.hero-copy {
  max-width: 64ch;
  color: var(--muted);
  font-size: clamp(1rem, 2vw, 1.2rem);
  line-height: 1.7;
}

.privacy-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  margin: 2rem 0 0;
  padding: 0;
  color: var(--ink);
  font-size: 0.84rem;
  font-weight: 700;
  list-style: none;
}

.privacy-list li::before {
  content: "✓";
  margin-right: 0.5rem;
  color: var(--acid);
}

.input-panel,
.results,
.how-to {
  border-top: 1px solid var(--line);
  padding: clamp(2rem, 6vw, 4rem) 0;
}

.section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: 2rem;
}

.section-heading h2,
.how-to h2 {
  margin-bottom: 0;
  font-size: clamp(2rem, 5vw, 4.4rem);
  letter-spacing: -0.055em;
  line-height: 0.95;
}

.text-button {
  border: 0;
  border-bottom: 1px solid currentColor;
  padding: 0.3rem 0;
  color: var(--ink);
  background: transparent;
  font-size: 0.84rem;
  font-weight: 750;
  cursor: pointer;
}

.text-button:hover {
  color: var(--acid);
}

.file-picker {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 6rem;
  border: 1px dashed #59675f;
  padding: 1rem;
  background: var(--surface);
  cursor: pointer;
}

.file-picker:hover {
  border-color: var(--acid);
  background: var(--surface-raised);
}

.file-picker input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.file-picker:focus-within {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

.file-icon {
  display: grid;
  width: 3.5rem;
  aspect-ratio: 1;
  place-items: center;
  border: 1px solid var(--line);
  color: var(--acid);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.72rem;
  font-weight: 800;
}

.file-picker strong,
.file-picker small {
  display: block;
}

.file-picker small {
  margin-top: 0.35rem;
  color: var(--muted);
}

.or {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 1.5rem 0;
  color: var(--muted);
  font-size: 0.76rem;
  text-transform: uppercase;
}

.or::before,
.or::after {
  content: "";
  height: 1px;
  flex: 1;
  background: var(--line);
}

textarea {
  display: block;
  width: 100%;
  min-height: 18rem;
  resize: vertical;
  border: 1px solid var(--line);
  border-radius: 0;
  padding: 1rem;
  color: var(--ink);
  background: #0c120f;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.84rem;
  line-height: 1.7;
}

textarea::placeholder {
  color: #707b74;
}

textarea:focus-visible,
button:focus-visible,
a:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

.form-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1rem;
}

.form-footer p {
  margin: 0;
  color: var(--muted);
  font-size: 0.78rem;
}

.primary-button {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  border: 1px solid var(--acid);
  padding: 0.9rem 1.1rem;
  color: var(--background);
  background: var(--acid);
  font-weight: 800;
  cursor: pointer;
}

.primary-button:hover {
  border-color: var(--ink);
  background: var(--ink);
}

.error {
  margin: 1rem 0 0;
  border-left: 3px solid var(--coral);
  padding: 0.75rem 1rem;
  color: #ffd4cc;
  background: rgb(255 128 105 / 8%);
}

[hidden] {
  display: none !important;
}

.stat-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  border: 1px solid var(--line);
  border-right: 0;
}

.stat-card {
  min-width: 0;
  border-right: 1px solid var(--line);
  padding: clamp(1rem, 3vw, 1.75rem);
  background: var(--surface);
}

.stat-value,
.stat-label {
  display: block;
}

.stat-value {
  overflow: hidden;
  margin-bottom: 0.5rem;
  color: var(--acid);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: clamp(1.6rem, 4vw, 3.2rem);
  font-weight: 800;
  letter-spacing: -0.06em;
  text-overflow: ellipsis;
}

.stat-label {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 700;
  text-transform: uppercase;
}

.detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-top: 1rem;
}

.data-card {
  border: 1px solid var(--line);
  padding: clamp(1rem, 3vw, 1.75rem);
  background: var(--surface);
}

.activity-card {
  grid-column: 1 / -1;
}

.card-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  border-bottom: 1px solid var(--line);
  padding-bottom: 1rem;
}

.card-heading h3 {
  margin: 0;
  font-size: 1.2rem;
}

.card-heading span {
  color: var(--muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.72rem;
  text-transform: uppercase;
}

.rank-list,
.word-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.rank-item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.55rem 1rem;
  border-bottom: 1px solid var(--line);
  padding: 1rem 0;
}

.rank-copy strong,
.rank-copy span {
  display: block;
}

.rank-copy span {
  margin-top: 0.2rem;
  color: var(--muted);
  font-size: 0.75rem;
}

.rank-count {
  align-self: center;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

progress {
  overflow: hidden;
  width: 100%;
  height: 0.35rem;
  border: 0;
  border-radius: 0;
  appearance: none;
  background: #303b35;
}

progress::-webkit-progress-bar {
  background: #303b35;
}

progress::-webkit-progress-value {
  background: var(--acid);
}

progress::-moz-progress-bar {
  background: var(--acid);
}

.rank-progress {
  grid-column: 1 / -1;
}

.word-item {
  display: grid;
  grid-template-columns: 2rem 1fr auto;
  gap: 0.5rem;
  border-bottom: 1px solid var(--line);
  padding: 0.85rem 0;
}

.word-number,
.word-item > span:last-child {
  color: var(--muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.76rem;
}

.hour-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.8rem 2rem;
  padding-top: 1rem;
}

.hour-row {
  display: grid;
  grid-template-columns: 4rem 1fr 2.5rem;
  align-items: center;
  gap: 0.75rem;
  color: var(--muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.72rem;
}

.hour-row > span:last-child {
  text-align: right;
}

.how-to h2 {
  max-width: 12ch;
}

.how-to > ol {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  margin: 2.5rem 0 0;
  padding: 1px;
  background: var(--line);
  list-style-position: inside;
}

.how-to li {
  min-height: 12rem;
  padding: 1.5rem;
  background: var(--background);
}

.how-to li::marker {
  color: var(--coral);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.how-to strong,
.how-to span {
  display: block;
  margin-top: 1.25rem;
}

.how-to span {
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.6;
}

footer {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  border-top: 1px solid var(--line);
  padding: 2rem 0;
  color: var(--muted);
  font-size: 0.78rem;
}

footer p {
  margin: 0;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (max-width: 820px) {
  .stat-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .stat-card:last-child {
    grid-column: 1 / -1;
  }

  .detail-grid,
  .hour-list,
  .how-to > ol {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .masthead,
  main,
  footer {
    width: min(100% - 1rem, 1180px);
  }

  .masthead p {
    font-size: 0;
  }

  .masthead p::after {
    content: "Local only";
    font-size: 0.75rem;
  }

  .section-heading,
  .form-footer,
  footer {
    align-items: flex-start;
    flex-direction: column;
  }

  .primary-button {
    justify-content: space-between;
    width: 100%;
  }

  .stat-grid {
    grid-template-columns: 1fr;
  }

  .stat-card:last-child {
    grid-column: auto;
  }
}

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

/* Keepsake shop: the blue paper sample is the object, the form stays quiet. */
.free-exports{display:flex;flex-wrap:wrap;align-items:center;gap:1rem;padding:1.25rem 0}.free-exports p{margin:0 auto 0 0;color:var(--muted);font-size:.85rem}
.keepsake{border-top:1px solid var(--line);padding:4rem 0}.keepsake-intro{display:grid;grid-template-columns:1.2fr 1fr;gap:4rem;align-items:center}.keepsake h2{font-size:clamp(2.6rem,5vw,4.7rem);line-height:1;letter-spacing:-.055em;margin:0 0 1.5rem}.keepsake-intro p{max-width:55ch;line-height:1.65;color:var(--muted)}.pack-price{font-size:2.4rem;font-weight:750;color:var(--ink)!important;margin-bottom:1rem}.pack-price span{font-size:.83rem;font-weight:400;display:block}.pack-features{padding-left:1.2rem;line-height:1.8;font-size:.9rem}.small-copy{font-size:.8rem;color:var(--muted);line-height:1.6;max-width:65ch}.pack-preview{margin:0;background:#dce5ff;padding:2rem 2rem 1rem;border-radius:24px;color:#1d41b7;transform:rotate(2deg)}.preview-paper{background:#fff;min-height:360px;padding:1.7rem;border-radius:3px;box-shadow:0 12px 24px #1d41b715;position:relative}.preview-paper>span{font-size:.65rem}.preview-paper>strong{display:block;font:2.5rem/1.08 Georgia,serif;margin:2rem 0 1.5rem;letter-spacing:-.05em}.preview-bubble{font-size:3.4rem;background:#1d41b7;color:white;padding:1rem 1.25rem;border-radius:25px 25px 25px 0;width:86%;line-height:1}.preview-bubble span{display:block;font-size:.65rem;margin-top:.5rem}.preview-reply{position:relative;margin:-5px 0 0 auto;width:70%;background:#e5edff;padding:1rem;border-radius:20px 20px 0 20px;font:1.1rem/1.3 Georgia,serif}.pack-preview figcaption{font-size:.68rem;text-align:center;padding:.8rem 0 0}.purchase-message{background:var(--surface-raised);border-left:3px solid var(--acid);padding:1rem 1.2rem;margin:3rem 0 1.5rem;line-height:1.7;overflow-wrap:anywhere}.purchase-error{border-left-color:var(--coral);color:#ffd4cc}.purchase-columns{display:grid;grid-template-columns:1fr 1fr;gap:3rem}.purchase-columns form{min-width:0}.purchase-columns h3{font-size:1.35rem;margin:0 0 1.5rem}.keepsake label{display:block;font-size:.83rem;margin:1rem 0 .5rem}.keepsake label span{color:var(--muted)}.keepsake input,.keepsake select{width:100%;min-height:3rem;border:1px solid var(--line);background:#0c120f;color:var(--ink);padding:.8rem;font:inherit;border-radius:3px}.keepsake textarea{min-height:5rem;font:inherit;line-height:1.5}.keepsake input:focus-visible,.keepsake select:focus-visible,summary:focus-visible{outline:3px solid var(--focus);outline-offset:3px}.keepsake .primary-button{margin-top:1rem}.keepsake button:disabled{cursor:not-allowed;opacity:.5}.keepsake button:disabled:hover{background:var(--acid);border-color:var(--acid)}.purchase-form .small-copy{margin-top:1rem}.report-form .small-copy{margin-top:1rem}.restore-details{border-top:1px solid var(--line);margin-top:2rem;padding-top:1.5rem}.restore-details summary{cursor:pointer;font-weight:650}.restore-form{display:grid;grid-template-columns:1fr 1.5fr auto;gap:1rem;align-items:end;margin-bottom:1rem}.restore-form .primary-button{white-space:nowrap;height:3rem}#checkout-link{display:block;margin:1rem 0;color:var(--acid)}footer nav{display:flex;gap:1rem}.legal-main{max-width:760px;padding:4rem 0;line-height:1.8}.legal-main h1{font-size:3rem;line-height:1.1;letter-spacing:-.04em;max-width:20ch}.legal-main h2{font-size:1.5rem;margin-top:2rem}.legal-main p{color:var(--muted)}
@media(max-width:820px){.keepsake-intro{gap:2rem;grid-template-columns:1fr}.pack-preview{max-width:410px;width:100%;margin:1rem auto}.purchase-columns{grid-template-columns:1fr;gap:2rem}.restore-form{grid-template-columns:1fr}.restore-form .primary-button{justify-content:center}.keepsake{padding:3rem .5rem}.keepsake .pack-price{font-size:2rem}.free-exports{gap:.8rem}}
@media print{.keepsake{display:none}}