:root {
  font-family: ui-rounded, "Hiragino Maru Gothic ProN", "Yu Gothic", system-ui, sans-serif;
  color: #292722;
  background: #f3efe8;
  font-synthesis: none;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  background: radial-gradient(circle at top, #faf7f1 0, #f3efe8 55%, #ebe4d9 100%);
}

button, input { font: inherit; }
button { cursor: pointer; }

.app-shell {
  width: min(100%, 560px);
  min-height: 100vh;
  margin: 0 auto;
  padding: 48px 24px 40px;
  display: grid;
  align-items: center;
}

.screen { display: none; }
.screen.active { display: block; animation: appear .22s ease-out; }

@keyframes appear {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.eyebrow {
  margin: 0 0 14px;
  color: #746f65;
  font-size: .84rem;
  letter-spacing: .08em;
}

h1, h2 {
  margin: 0;
  font-weight: 650;
  letter-spacing: -.035em;
  line-height: 1.35;
}

h1 { font-size: clamp(2rem, 7vw, 3.2rem); }
h2 { font-size: clamp(1.7rem, 5vw, 2.35rem); }

.lead, .muted, .rest-cue, .quiet-note {
  line-height: 1.9;
  color: #625e56;
}

.lead { margin: 24px 0 34px; font-size: 1.03rem; }
.muted { margin: 12px 0 24px; font-size: .95rem; }
.rest-cue { margin: 16px 0 28px; font-size: 1.08rem; }
.quiet-note { margin: 10px 0 0; font-size: .8rem; text-align: center; color: #817b70; }

.primary, .secondary, .choice, .text-button {
  border: 0;
  border-radius: 18px;
}

.primary {
  width: 100%;
  padding: 17px 20px;
  background: #34322d;
  color: #fffdf8;
  font-weight: 650;
}

.secondary {
  padding: 12px 16px;
  background: #ded7ca;
  color: #34322d;
  white-space: nowrap;
}

.secondary.wide {
  width: 100%;
  padding: 15px 18px;
}

.choice-list {
  display: grid;
  gap: 10px;
  margin: 24px 0 26px;
}

.choice {
  width: 100%;
  padding: 16px 18px;
  text-align: left;
  background: rgba(255,255,255,.68);
  color: #34322d;
  border: 1px solid rgba(76,70,60,.11);
}

.choice:hover, .choice:focus-visible { background: #fffdfa; }
.choice small { display: block; margin-top: 5px; color: #777166; line-height: 1.55; }

.actions { display: grid; gap: 10px; }
.text-button {
  width: 100%;
  padding: 13px 16px;
  background: transparent;
  color: #6d685e;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.parking {
  padding-top: 20px;
  border-top: 1px solid rgba(76,70,60,.13);
}

.parking.standalone { margin-top: 30px; }

.parking label {
  display: block;
  margin-bottom: 10px;
  color: #514d46;
  font-size: .92rem;
}

.parking-row { display: flex; gap: 8px; }
.parking-row input {
  min-width: 0;
  flex: 1;
  padding: 12px 14px;
  border: 1px solid rgba(76,70,60,.18);
  border-radius: 14px;
  background: rgba(255,255,255,.72);
  color: #292722;
}

.parking-status {
  min-height: 1.4em;
  margin: 9px 0 0;
  color: #777166;
  font-size: .84rem;
}

.quiet-field {
  position: relative;
  display: grid;
  place-items: center;
  width: min(78vw, 360px);
  aspect-ratio: 1.35;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 48% 52% 55% 45% / 44% 42% 58% 56%;
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,.78), transparent 42%),
    radial-gradient(circle at 68% 62%, rgba(206,197,180,.56), transparent 54%),
    rgba(225,217,203,.74);
  animation: drift 18s ease-in-out infinite alternate;
}

.quiet-field::after {
  content: '';
  position: absolute;
  inset: 12%;
  border-radius: 52% 48% 43% 57% / 58% 48% 52% 42%;
  border: 1px solid rgba(88,80,69,.08);
  animation: drift-inner 24s ease-in-out infinite alternate;
}

.quiet-field span {
  position: relative;
  z-index: 1;
  color: #615c53;
  font-size: .95rem;
  letter-spacing: .03em;
}

@keyframes drift {
  from { transform: scale(.98) rotate(-1deg); border-radius: 48% 52% 55% 45% / 44% 42% 58% 56%; }
  to { transform: scale(1.03) rotate(1deg); border-radius: 55% 45% 47% 53% / 51% 58% 42% 49%; }
}

@keyframes drift-inner {
  from { transform: translate(-4px, 3px) rotate(0deg); }
  to { transform: translate(5px, -3px) rotate(5deg); }
}

.rest-time { text-align: center; margin-top: 18px; }
.rest-actions { margin-top: 30px; display: grid; gap: 8px; }
.rest-parking { margin: 6px 0 2px; padding: 18px; border-radius: 18px; background: rgba(255,255,255,.38); }
.rest-parking .parking { padding-top: 0; border-top: 0; }

@media (prefers-reduced-motion: reduce) {
  .screen.active, .quiet-field, .quiet-field::after { animation: none; }
}

@media (max-width: 420px) {
  .app-shell { padding: 34px 18px 28px; align-items: start; }
  .screen { padding-top: 8vh; }
  .quiet-field { width: min(88vw, 340px); }
  .parking-row { align-items: stretch; }
}