.feedback-wall {
  background: #edf0e3;
  border-block: 1px solid #dce3d0;
  overflow: clip;
}
.feedback-heading {
  display: grid;
  grid-template-columns: 1.3fr .8fr;
  align-items: end;
  gap: 0 70px;
}
.feedback-heading .section-label {
  grid-column: 1 / -1;
  margin-bottom: 25px;
}
.feedback-heading h2 {
  max-width: 700px;
  font-size: clamp(40px, 4.7vw, 64px);
  line-height: 1.03;
}
.feedback-heading > p:not(.section-label) {
  max-width: 370px;
  padding-bottom: 3px;
  color: #6e7c64;
  font-size: 14px;
  line-height: 1.85;
}
.feedback-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 25px;
  margin: 35px 0 18px;
}
.feedback-hint {
  color: #7a886c;
  font-size: 11px;
  line-height: 1.6;
}
.feedback-hint span {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}
.feedback-controls {
  display: flex;
  align-items: center;
  gap: 11px;
  flex: none;
}
.feedback-prev,
.feedback-next {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid #cad5ba;
  border-radius: 50%;
  background: transparent;
  color: var(--forest, #071f1c);
  font-size: 21px;
  line-height: 1;
  transition: background .2s, color .2s, border-color .2s, transform .2s;
}
.feedback-prev:not(:disabled):hover,
.feedback-next:not(:disabled):hover {
  transform: translateY(-2px);
  border-color: var(--forest, #071f1c);
  background: var(--forest, #071f1c);
  color: var(--lime, #d7ff76);
}
.feedback-prev:disabled,
.feedback-next:disabled {
  opacity: .3;
  cursor: default;
}
.feedback-position {
  min-width: 57px;
  color: #829071;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  text-align: center;
  white-space: nowrap;
}
.feedback-position [data-current] {
  color: var(--forest, #071f1c);
  font-weight: 750;
}
.feedback-track {
  display: flex;
  gap: 20px;
  width: 100%;
  max-width: 100%;
  padding: 5px 2px 22px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 2px;
  scroll-behavior: smooth;
  overscroll-behavior-x: contain;
  scrollbar-color: #91aa6f #dfe5d4;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
  cursor: grab;
  touch-action: auto;
}
.feedback-track::-webkit-scrollbar { height: 5px; }
.feedback-track::-webkit-scrollbar-track { background: #dfe5d4; border-radius: 10px; }
.feedback-track::-webkit-scrollbar-thumb { background: #91aa6f; border-radius: 10px; }
.feedback-track:focus-visible {
  outline: 2px solid #6e8c4b;
  outline-offset: 7px;
  border-radius: 15px;
}
.feedback-track.is-dragging,
.feedback-track.is-dragging .feedback-open {
  cursor: grabbing;
  user-select: none;
  -webkit-user-select: none;
}
.feedback-track.is-dragging { scroll-snap-type: none; scroll-behavior: auto; }
.feedback-card {
  display: flex;
  flex-direction: column;
  flex: 0 0 360px;
  min-width: 0;
  scroll-snap-align: start;
  border: 1px solid #d5dec9;
  border-radius: 18px;
  background: #fbfcf6;
  overflow: hidden;
  box-shadow: 0 5px 15px #16351f04;
  transition: border-color .2s, box-shadow .2s;
}
.feedback-card:focus-within,
.feedback-card:hover {
  border-color: #aebe96;
  box-shadow: 0 8px 25px #16351f0b;
}
.feedback-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 59px;
  padding: 16px 20px;
  border-bottom: 1px solid #e6ebdd;
}
.feedback-number {
  color: #94a085;
  font-size: 10px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  letter-spacing: .05em;
}
.feedback-context {
  max-width: 240px;
  padding: 4px 9px;
  border: 1px solid #dce5cd;
  border-radius: 30px;
  background: #edf3e3;
  color: #6c8059;
  font-size: 9px;
  font-weight: 650;
  line-height: 1.4;
}
.feedback-open {
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  width: 100%;
  height: 430px;
  min-height: 44px;
  padding: 14px 16px;
  border: 0;
  background: #fff;
  overflow: hidden;
  cursor: zoom-in;
}
.feedback-open:focus-visible {
  z-index: 1;
  outline: 3px solid #87a954;
  outline-offset: -4px;
}
.feedback-image {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  max-height: 100%;
  object-fit: contain;
  object-position: center;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
}
.feedback-card-footer {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 1;
  min-height: 155px;
  padding: 20px 22px 15px;
  border-top: 1px solid #e6ebdd;
}
.feedback-person {
  max-width: 100%;
  font-size: 23px;
  line-height: 1.15;
  letter-spacing: -.04em;
  overflow-wrap: anywhere;
}
.feedback-caption {
  margin-top: 8px;
  color: #7c8970;
  font-size: 12px;
  line-height: 1.75;
}
.feedback-source {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  margin-top: auto;
  padding-top: 7px;
  color: #466338;
  font-size: 10px;
  font-weight: 650;
  text-decoration: underline;
  text-decoration-color: #b9c8a7;
  text-underline-offset: 5px;
  transition: color .2s, text-decoration-color .2s;
}
.feedback-source:hover { color: #071f1c; text-decoration-color: #071f1c; }
.feedback-footnote {
  max-width: 840px;
  margin-top: 20px;
  color: #88957b;
  font-size: 10px;
  line-height: 1.85;
}
.feedback-viewer {
  width: min(1080px, calc(100vw - 48px));
  max-width: none;
  height: min(900px, calc(100dvh - 56px));
  max-height: calc(100dvh - 56px);
  margin: auto;
  padding: 0;
  border: 1px solid #748662;
  border-radius: 19px;
  background: var(--paper, #f5f5ed);
  color: var(--forest, #071f1c);
  overflow: hidden;
  box-shadow: 0 35px 100px #00120cb3;
}
.feedback-viewer[open] {
  display: flex;
  flex-direction: column;
  animation: feedback-viewer-in .22s cubic-bezier(.2,.8,.2,1) both;
}
.feedback-viewer::backdrop {
  background: #041a15db;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.feedback-viewer-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex: none;
  min-height: 74px;
  padding: 14px 20px 14px 27px;
  border-bottom: 1px solid #dce4cf;
}
.feedback-viewer-bar strong {
  font-size: 14px;
  font-weight: 650;
  line-height: 1.5;
}
.feedback-close {
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid #ccd6bb;
  border-radius: 50%;
  background: transparent;
  color: #34512b;
  font-size: 25px;
  font-weight: 400;
  line-height: 1;
  transition: background .2s, border-color .2s, color .2s;
}
.feedback-close:hover {
  border-color: var(--forest, #071f1c);
  background: var(--forest, #071f1c);
  color: var(--lime, #d7ff76);
}
.feedback-viewer-body {
  flex: 1;
  min-height: 0;
  padding: 26px;
  background: #e7ecdc;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-color: #819965 #dfe5d4;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}
.feedback-viewer-body img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  margin-inline: auto;
  background: #fff;
  box-shadow: 0 3px 20px #122b1712;
}
.feedback-viewer-actions {
  flex: none;
  padding: 7px 26px;
  border-top: 1px solid #dce4cf;
}
.feedback-viewer-actions a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: #526d3d;
  font-size: 11px;
  font-weight: 650;
  text-decoration: underline;
  text-decoration-color: #c0ceae;
  text-underline-offset: 4px;
}
@keyframes feedback-viewer-in {
  from { opacity: 0; transform: translateY(12px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@media (max-width: 1100px) {
  .feedback-heading { gap: 0 45px; }
  .feedback-card { flex-basis: 340px; }
  .feedback-open { height: 410px; }
}
@media (max-width: 820px) {
  .feedback-heading { grid-template-columns: 1.2fr .9fr; gap: 0 35px; }
  .feedback-heading h2 { font-size: 49px; }
  .feedback-heading > p:not(.section-label) { font-size: 13px; }
  .feedback-card { flex-basis: 320px; }
  .feedback-open { height: 390px; }
}
@media (max-width: 640px) {
  .feedback-heading { display: block; }
  .feedback-heading .section-label { margin-bottom: 24px; font-size: 9px; }
  .feedback-heading h2 { max-width: 430px; font-size: 43px; line-height: 1.05; }
  .feedback-heading > p:not(.section-label) { margin-top: 19px; padding: 0; max-width: 390px; font-size: 14px; line-height: 1.8; }
  .feedback-toolbar { gap: 15px; margin: 25px 0 14px; }
  .feedback-hint { max-width: 145px; font-size: 10px; }
  .feedback-controls { gap: 7px; }
  .feedback-position { min-width: 46px; font-size: 10px; }
  .feedback-track { gap: 15px; width: calc(100% + 20px); max-width: none; padding: 4px 20px 20px 1px; scroll-padding-left: 1px; }
  .feedback-card { flex-basis: min(84vw, 340px); border-radius: 16px; }
  .feedback-card-header { min-height: 54px; padding: 15px 17px; gap: 10px; }
  .feedback-number { font-size: 9px; }
  .feedback-context { font-size: 8px; padding: 4px 8px; }
  .feedback-open { height: 385px; padding: 13px; }
  .feedback-card-footer { min-height: 151px; padding: 20px 19px 13px; }
  .feedback-person { font-size: 23px; }
  .feedback-caption { font-size: 12px; line-height: 1.75; }
  .feedback-source { font-size: 10px; }
  .feedback-footnote { margin-top: 17px; font-size: 10px; line-height: 1.8; }
  .feedback-viewer { width: calc(100vw - 20px); height: calc(100dvh - 30px); max-height: calc(100dvh - 30px); border-radius: 15px; }
  .feedback-viewer-bar { min-height: 69px; padding: 12px 12px 12px 18px; gap: 15px; }
  .feedback-viewer-bar strong { font-size: 12px; }
  .feedback-viewer-body { padding: 12px; }
  .feedback-viewer-actions { padding: 6px 18px; }
  .feedback-viewer-actions a { font-size: 11px; }
}
@media (max-width: 374px) {
  .feedback-heading h2 { font-size: 38px; }
  .feedback-hint { max-width: 125px; font-size: 9px; }
  .feedback-controls { gap: 4px; }
  .feedback-position { min-width: 40px; font-size: 9px; }
  .feedback-track { width: calc(100% + 16px); padding-right: 16px; }
  .feedback-card { flex-basis: 85vw; }
  .feedback-open { height: 350px; padding: 11px; }
  .feedback-person { font-size: 21px; }
}
@media (prefers-reduced-motion: reduce) {
  .feedback-track { scroll-behavior: auto; }
  .feedback-viewer[open] { animation: none; }
  .feedback-card,
  .feedback-prev,
  .feedback-next,
  .feedback-source,
  .feedback-close { transition: none; }
}
.feedback-text {display:flex;flex-direction:column;justify-content:center;min-height:430px;margin:0;padding:32px 28px;background:#f3f7eb;color:var(--forest);font-size:23px;line-height:1.6;letter-spacing:-.02em}
.feedback-text::before {content:'“';font-family:var(--display);color:#8da968;font-size:68px;line-height:.7;margin-bottom:22px}
.feedback-text p{margin:0}
.feedback-caption,.feedback-footnote,.feedback-heading>p:not(.section-label){color:#5e7052}
.feedback-footnote{font-size:12px}
.feedback-position [data-feedback-current]{color:var(--forest);font-weight:750}
.feedback-viewer-open body{position:fixed;left:0;right:0;width:100%;overflow:hidden}
@media(max-width:820px){.feedback-text{min-height:390px;font-size:22px}}
@media(max-width:640px){.feedback-text{min-height:385px;padding:27px 25px;font-size:23px}.feedback-footnote{font-size:11px}.feedback-context{font-size:10px}.feedback-source{font-size:11px}.feedback-hint{font-size:11px}}
@media(max-width:374px){.feedback-text{min-height:350px;font-size:21px}.feedback-context{font-size:9px}}
.feedback-open.has-quote{display:flex;flex-direction:column;justify-content:center;gap:25px;padding:28px 24px}
.feedback-readable-quote{font-family:var(--display);font-size:23px;line-height:1.4;letter-spacing:-.035em;text-align:left;color:var(--forest)}
.feedback-open.has-quote .feedback-image{height:auto;max-height:185px;flex:none}
@media(max-width:640px){.feedback-open.has-quote{padding:25px 22px;gap:20px}.feedback-readable-quote{font-size:22px}.feedback-open.has-quote .feedback-image{max-height:150px}}
.feedback-sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.feedback-wall{padding-top:66px}
@media(max-width:640px){.feedback-wall{padding-top:45px}}
.feedback-card{position:relative}