:root { color-scheme: light; }
* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html { -webkit-text-size-adjust: 100%; }
body {
  background: #FFFFFF; color: #1B181F;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  font-size: 17px; line-height: 1.55;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
.wrap { max-width: 460px; margin: 0 auto; padding: 24px 24px 64px; }
.brand { font-family: ui-serif, "New York", Georgia, serif; font-weight: 600; font-size: 20px; color: #6D4AFF; letter-spacing: -0.01em; text-decoration: none; display: inline-block; padding: 8px 0 24px; }
h1 { font-family: ui-serif, "New York", Georgia, serif; font-weight: 600; font-size: clamp(30px, 8.5vw, 40px); line-height: 1.12; letter-spacing: -0.015em; }
.sub { color: #6B6771; margin-top: 12px; }
.label { display: block; font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: #6B6771; margin: 24px 0 8px; }
input[type=text], textarea {
  width: 100%; font: inherit; font-size: 17px; color: #1B181F;
  border: 1px solid #E5E2DD; border-radius: 12px; padding: 14px 16px; background: #FFF;
  transition: border-color .15s ease;
}
input:focus, textarea:focus { outline: none; border-color: #1B181F; }
textarea { min-height: 128px; resize: vertical; }
.hint { font-size: 13px; color: #9B96A0; margin-top: 6px; }
.btn {
  display: flex; align-items: center; justify-content: center; width: 100%; height: 54px;
  background: #1B181F; color: #F2EFEA; font: inherit; font-size: 17px; font-weight: 600;
  border: 0; border-radius: 16px; cursor: pointer; margin-top: 32px; text-decoration: none;
  transition: transform .12s ease, opacity .12s ease;
}
.btn:active { transform: scale(0.985); }
.btn[disabled] { opacity: .5; }
.btn.quiet { background: #FFF; color: #1B181F; border: 1px solid #E5E2DD; margin-top: 12px; }
.btn.wa { background: #1FA855; color: #FFF; }
.pill { display: inline-block; font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; border: 1px solid #E5E2DD; color: #6B6771; border-radius: 999px; padding: 6px 12px; }
.pill.ink { background: #1B181F; border-color: #1B181F; color: #F2EFEA; }
.photo { width: 100%; border-radius: 24px; display: block; box-shadow: 0 1px 2px rgba(27,24,31,.06), 0 16px 48px rgba(27,24,31,.12); }
.story { margin-top: 20px; padding-left: 16px; border-left: 2px solid #E5E2DD; color: #3A3640; white-space: pre-line; }
.byline { margin-top: 16px; font-size: 15px; color: #6B6771; }
.rule { border: 0; border-top: 1px solid #F0EEEA; margin: 40px 0 24px; }
.foot { font-size: 14px; color: #9B96A0; }
.foot a { color: #1B181F; }
.linkbox { border: 1px solid #E5E2DD; border-radius: 12px; padding: 12px 14px; font-size: 14px; color: #3A3640; word-break: break-all; margin-top: 8px; background: #FAFAF8; }
.step { display: flex; gap: 14px; margin-top: 18px; align-items: baseline; }
.step b { font-family: ui-serif, "New York", Georgia, serif; font-size: 18px; min-width: 20px; color: #1B181F; }
.step span { color: #6B6771; font-size: 15px; }
.pickzone { margin-top: 8px; border: 1.5px dashed #D8D4CE; border-radius: 20px; padding: 36px 16px; text-align: center; color: #6B6771; cursor: pointer; font-size: 15px; }
.pickzone.has { padding: 0; border: 0; }
.pickzone img { width: 100%; border-radius: 20px; display: block; }
.skeleton { height: 420px; border-radius: 24px; background: linear-gradient(100deg, #F5F3F0 40%, #FAFAF8 50%, #F5F3F0 60%); background-size: 200% 100%; animation: shimmer 1.2s infinite linear; }
@keyframes shimmer { to { background-position: -200% 0; } }
.fadeup { animation: fadeup .45s ease both; }
@keyframes fadeup { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .fadeup, .skeleton { animation: none; } }