:root { font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: #f3f8ed; background: #102a21; color-scheme: dark; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100svh; background: radial-gradient(ellipse at 12% 0, #285240 0, transparent 55%), #102a21; }
main { width: min(100% - 64px, 1110px); margin: auto; padding: 38px 0 24px; }
header, footer { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
header { margin-bottom: 42px; }
.brand { display: inline-flex; align-items: center; gap: 12px; color: #f3f8ed; text-decoration: none; font-size: 30px; font-weight: 800; letter-spacing: -.05em; line-height: 1; }
.brand-mark { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 15px; background: #c8f294; color: #173b29; font-size: 39px; padding-bottom: 6px; }
.brand-partner { display: block; margin-top: 5px; color: #c8f294; font-size: 11px; letter-spacing: .2em; font-weight: 600; }
.header-note { color: #c0d4c4; font-size: 13px; }
.hero { display: grid; grid-template-columns: 1.05fr 1fr; border: 1px solid #536b4d; border-radius: 28px; overflow: hidden; box-shadow: 0 28px 80px #00130940; animation: arrive .65s ease-out both; }
.card { padding: clamp(28px, 4.5vw, 52px); background: #19382b; }
.status-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 30px; }
.status-pill { border: 1px solid #6d8660; color: #daefc7; border-radius: 30px; padding: 8px 12px; font-size: 10px; letter-spacing: .13em; font-weight: 700; }
.spark { font-size: 29px; color: #c8f294; }
.symbol { display: grid; place-items: center; width: 65px; height: 65px; border-radius: 21px; background: #c8f294; color: #23452e; margin: 0 0 26px; transform: rotate(-5deg); }
.symbol svg { width: 34px; height: 34px; transform: rotate(5deg); }
.check-icon, .error-icon { display: none; }
.eyebrow { color: #c8f294; font-size: 10px; font-weight: 750; letter-spacing: .13em; line-height: 1.6; }
h1 { max-width: 420px; font-size: clamp(36px, 4.2vw, 52px); font-weight: 650; letter-spacing: -.045em; line-height: 1.08; margin: 16px 0 20px; text-wrap: balance; }
p { font-size: 16px; color: #c7d7c7; line-height: 1.7; }
#message { margin-bottom: 0; }
.next { display: flex; align-items: flex-start; gap: 14px; margin-top: 32px; padding-top: 24px; border-top: 1px solid #466047; }
.next-arrow { flex-shrink: 0; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #304f37; color: #d2edb6; font-size: 22px; }
.next-label { color: #d2edb6; font-size: 10px; font-weight: 750; letter-spacing: .12em; }
.next p { margin: 6px 0 0; font-size: 14px; line-height: 1.65; }
.journey { display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; background: #f4efdf; color: #234632; padding: 42px 24px 26px; }
.journey-heading { padding: 0 16px; }
.journey .eyebrow { color: #526d49; font-size: 9px; }
h2 { font-size: clamp(28px, 3.6vw, 42px); font-weight: 600; letter-spacing: -.045em; line-height: 1.13; margin: 14px 0 0; }
h2 span { color: #8e6526; }
.route-art { display: block; width: 100%; max-height: 370px; margin: 12px 0; overflow: visible; }
.route-line { animation: route-flow 18s linear infinite; }
.parcel { animation: parcel-float 5s ease-in-out infinite; }
.journey-footer { display: flex; align-items: center; gap: 10px; padding: 0 16px; font-size: 12px; color: #456447; }
.mini-mark { color: #244a32; font-size: 21px; }
footer { margin-top: 27px; color: #bdcfbb; font-size: 12px; }
.footer-dot { padding: 0 7px; color: #c8f294; }
body[data-state="complete"] .mail-icon, body[data-state="error"] .mail-icon { display: none; }
body[data-state="complete"] .check-icon, body[data-state="error"] .error-icon { display: block; }
body[data-state="complete"] .symbol { animation: confirm-pop .5s ease-out both; box-shadow: 0 0 0 8px #c8f29410; }
body[data-state="error"] .symbol { background: #ffd3a3; color: #512c12; }
body[data-state="error"] .status-pill { border-color: #c49b71; color: #ffdab2; }
a:focus-visible { outline: 3px solid #c8f294; outline-offset: 6px; border-radius: 3px; }
@keyframes arrive { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes route-flow { to { stroke-dashoffset: -140; } }
@keyframes parcel-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes confirm-pop { from { transform: rotate(-5deg) scale(.8); } to { transform: rotate(-5deg) scale(1); } }
@media (max-width: 700px) {
  main { width: min(100% - 32px, 520px); padding-top: 24px; }
  header { margin-bottom: 28px; }
  .header-note { display: none; }
  .hero { grid-template-columns: 1fr; border-radius: 24px; }
  .card { padding: 28px; }
  h1 { font-size: 40px; }
  .status-row { margin-bottom: 25px; }
  .journey { padding: 26px 20px 22px; }
  .journey-heading { padding: 0 8px; }
  h2 { font-size: 32px; }
  .route-art { max-height: 240px; margin: 0; }
  .journey-footer { padding: 0 8px; }
  footer { flex-wrap: wrap; gap: 8px; font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}