html {
  background: #f3eee5;
}
body {
  margin: 0;
  color: #181512;
  background: #f3eee5;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
button, input, textarea {
  font: inherit;
}
.shell {
  width: min(100%, 720px);
  margin: 0 auto;
  padding: max(24px, env(safe-area-inset-top)) 18px calc(44px + env(safe-area-inset-bottom));
}
.header {
  margin: 12px 0 28px;
}
.brand {
  color: #714a31;
  font-size: 12px;
  font-weight: 850;
  letter-spacing: 0.16em;
}
h1 {
  margin: 7px 0 0;
  font-size: clamp(38px, 10vw, 62px);
  line-height: 0.96;
  letter-spacing: -0.055em;
}
h2 {
  margin: 0;
  font-size: 22px;
  letter-spacing: -0.03em;
}
.photoButton, .saveButton {
  display: grid;
  place-items: center;
  width: 100%;
  border: 0;
  border-radius: 18px;
  background: #181512;
  color: #fffaf3;
  font-weight: 800;
  cursor: pointer;
}
.photoButton {
  min-height: 76px;
  font-size: 19px;
}
.photoButton input {
  display: none;
}
.saveButton {
  padding: 18px;
  font-size: 18px;
}
.hint, .tiny {
  color: #776d65;
  line-height: 1.45;
}
.hint {
  margin: 11px 3px 25px;
  font-size: 13px;
}
.tiny {
  margin: 10px 3px 0;
  font-size: 11px;
}
.card {
  margin-top: 18px;
  padding: 16px;
  background: #fffaf3;
  border: 1px solid rgba(40, 30, 23, 0.1);
  border-radius: 24px;
}
.hidden {
  display: none !important;
}
.photoWrap {
  overflow: hidden;
  border-radius: 18px;
  aspect-ratio: 4 / 3;
  background: #ddd3c7;
}
.photoWrap img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.locationBox {
  margin: 13px 0 18px;
  padding: 13px 14px;
  border-radius: 15px;
  background: #eee4d7;
}
.labelSmall {
  color: #714a31;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 0.14em;
}
.locationStatus {
  margin-top: 5px;
  font-weight: 800;
}
.locationDetail {
  margin-top: 5px;
  color: #6e6259;
  font-size: 12px;
  line-height: 1.45;
}
.fields {
  display: grid;
  gap: 17px;
}
.field {
  display: block;
}
.field > span {
  display: block;
  margin: 0 0 7px 2px;
  color: #5d534c;
  font-size: 12px;
  font-weight: 800;
}
.field small {
  display: block;
  margin: 6px 3px 0;
  color: #81766d;
  font-size: 11px;
  line-height: 1.4;
}
input[type="text"], textarea {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid rgba(42, 31, 23, 0.14);
  border-radius: 14px;
  padding: 13px 14px;
  background: #fffdf9;
  color: #181512;
  outline: none;
}
.ratingRow {
  display: grid;
  grid-template-columns: 1fr 58px;
  gap: 12px;
  align-items: center;
}
.ratingRow input {
  width: 100%;
}
.ratingRow output {
  display: grid;
  place-items: center;
  height: 48px;
  border-radius: 14px;
  background: #eee4d7;
  font-size: 19px;
  font-weight: 850;
}
.details {
  padding: 13px 14px 2px;
  border-radius: 16px;
  background: #f5efe7;
}
.details summary {
  margin-bottom: 13px;
  font-weight: 800;
  cursor: pointer;
}
.details summary span {
  margin-left: 5px;
  color: #8b7d72;
  font-size: 11px;
  font-weight: 650;
}
.details .field {
  margin-bottom: 14px;
}
.recent {
  margin-top: 34px;
}
.recentHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
}
.resetButton {
  border: 0;
  background: transparent;
  color: #776d65;
}
.empty {
  margin-top: 13px;
  padding: 22px 17px;
  color: #776d65;
  border: 1px solid rgba(42, 31, 23, 0.09);
  border-radius: 18px;
  background: rgba(255, 250, 243, 0.55);
}
.feed {
  display: grid;
  gap: 14px;
  margin-top: 13px;
}
.feedCard {
  overflow: hidden;
  border: 1px solid rgba(42, 31, 23, 0.09);
  border-radius: 20px;
  background: #fffaf3;
}
.feedCard img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}
.feedBody {
  padding: 14px 15px 16px;
}
.feedTop {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.feedCafe {
  font-size: 18px;
  font-weight: 850;
}
.feedScore {
  font-size: 24px;
  font-weight: 900;
}
.feedMeta {
  margin-top: 3px;
  color: #796d64;
  font-size: 12px;
}
.feedNotes {
  margin-top: 10px;
  line-height: 1.4;
}