.feedback-demo {
  --feedback-blue: var(--blue, #075de8);
  --feedback-success: #14804a;
  --feedback-warning: #9a6700;
  --feedback-danger: #c52a2a;
  width: min(100%, 560px);
  min-width: 0;
  color: var(--text);
  font: 13px/1.35 "DM Sans", sans-serif;
}

.feedback-demo *, .feedback-demo *::before, .feedback-demo *::after { box-sizing: border-box; }
.feedback-demo button, .feedback-demo input, .feedback-demo select { color: inherit; font: inherit; }
.feedback-demo button, .feedback-demo a { cursor: pointer; }
.feedback-demo button:disabled { cursor: default; opacity: .7; }
.feedback-demo [hidden] { display: none !important; }
.feedback-demo p { margin: 3px 0 0; color: var(--muted); }
.feedback-demo a { color: var(--feedback-blue); font-weight: 700; text-decoration: none; }

.feedback-message, .feedback-alert-demo, .feedback-actionable, .feedback-toast, .feedback-site-alert, .feedback-callout, .feedback-section-message, .feedback-banner {
  position: relative;
  border: 1px solid var(--border);
  border-left: 4px solid var(--feedback-blue);
  border-radius: 7px;
  background: var(--surface);
}

.feedback-message { display: grid; grid-template-columns: 24px 1fr; gap: 9px; width: 100%; padding: 12px; }
.feedback-message.success, .feedback-actionable.success { border-left-color: var(--feedback-success); background: color-mix(in srgb, var(--feedback-success) 7%, var(--surface)); }
.feedback-message.warning, .feedback-actionable.warning { border-left-color: #d49b00; background: color-mix(in srgb, #f2b800 8%, var(--surface)); }
.feedback-message.error { border-left-color: var(--feedback-danger); background: color-mix(in srgb, var(--feedback-danger) 7%, var(--surface)); }
.feedback-symbol { display: grid; width: 21px; height: 21px; place-items: center; border-radius: 50%; background: var(--feedback-blue); color: #fff; font-weight: 800; }
.feedback-message.success .feedback-symbol::before, .feedback-actionable.success .feedback-symbol::before { content: "✓"; }.feedback-message.success .feedback-symbol, .feedback-actionable.success .feedback-symbol { background: var(--feedback-success); }
.feedback-message.warning .feedback-symbol::before, .feedback-actionable.warning .feedback-symbol::before { content: "!"; }.feedback-message.warning .feedback-symbol, .feedback-actionable.warning .feedback-symbol { background: #b77900; }
.feedback-message.error .feedback-symbol::before { content: "×"; }.feedback-message.error .feedback-symbol { background: var(--feedback-danger); }
.feedback-close { position: absolute; top: 7px; right: 7px; width: 25px; height: 25px; border: 0; background: transparent; font-size: 18px; }

.feedback-alert-demo { padding: 0; border-left: 0; }.feedback-alert-demo .feedback-message { padding-right: 35px; border: 0; border-left: 4px solid #d49b00; }
.feedback-demo-inline-notification, .feedback-demo-success-message { position: relative; }.feedback-demo-inline-notification .feedback-message { padding-right: 38px; }
.feedback-message-link { display: inline-block; margin: 7px 0 0 43px; }

.feedback-section-message { padding: 12px; }.feedback-section-message header { display: flex; align-items: center; gap: 7px; }.feedback-section-message header span, .feedback-callout > span { display: grid; width: 20px; height: 20px; place-items: center; border-radius: 50%; background: var(--feedback-blue); color: #fff; font-weight: 800; }
.feedback-section-message a { display: inline-block; margin-top: 7px; }
.feedback-banner { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 12px; border-left-width: 1px; border-top: 4px solid var(--feedback-blue); }.feedback-banner div { display: grid; }.feedback-banner span { color: var(--muted); font-size: .9em; }.feedback-banner button { border: 0; border-radius: 5px; background: var(--feedback-blue); color: white; padding: 7px 10px; font-weight: 700; white-space: nowrap; }
.feedback-site-alert { display: grid; grid-template-columns: 22px 1fr auto 22px; align-items: center; gap: 7px; padding: 9px 10px; border-left: 0; border-radius: 0; background: #2c2100; color: white; }.feedback-site-alert > span { display: grid; width: 20px; height: 20px; place-items: center; border-radius: 50%; background: #ffd43b; color: #2c2100; font-weight: 800; }.feedback-site-alert p { margin: 0; color: inherit; }.feedback-site-alert a { color: #ffdf70; white-space: nowrap; }.feedback-site-alert button { border: 0; background: transparent; color: white; font-size: 18px; }
.feedback-callout { display: grid; grid-template-columns: 22px 1fr; gap: 10px; padding: 12px; border-left-color: #e0a400; }.feedback-callout > span { background: #b77900; }.feedback-callout a { display: inline-block; margin-top: 6px; }

.feedback-toast { display: grid; grid-template-columns: 22px 1fr 22px; gap: 9px; width: min(100%, 300px); margin-left: auto; padding: 12px; border-left-color: var(--feedback-success); box-shadow: 0 10px 30px rgba(20, 35, 60, .16); }.feedback-toast .feedback-symbol { background: var(--feedback-success); }.feedback-toast .feedback-symbol::before { content: "✓"; }.feedback-toast small { display: block; margin-top: 4px; color: var(--muted); }.feedback-toast button { border: 0; background: transparent; font-size: 18px; }
.feedback-snackbar { display: flex; align-items: center; justify-content: space-between; gap: 18px; width: min(100%, 360px); margin: auto; border-radius: 6px; background: #202938; color: white; padding: 11px 14px; box-shadow: 0 10px 30px rgba(0,0,0,.2); }.feedback-snackbar button { border: 0; background: transparent; color: #8eb8ff; font-weight: 800; }
.feedback-actionable { display: grid; grid-template-columns: 22px 1fr auto; align-items: center; gap: 9px; padding: 11px; }.feedback-actionable > button { border: 1px solid currentColor; border-radius: 5px; background: transparent; color: var(--feedback-blue); padding: 6px 9px; font-weight: 700; }

.feedback-notification-center { overflow: hidden; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); }.feedback-notification-center header { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px 8px; border-bottom: 1px solid var(--border); padding: 9px 10px; }.feedback-notification-center header span { color: var(--feedback-blue); font-size: .82em; }.feedback-notification-center header button { grid-column: 2; grid-row: 1 / 3; border: 0; background: transparent; color: var(--feedback-blue); font-size: .82em; font-weight: 700; }.feedback-notification-center article { display: grid; grid-template-columns: 8px 1fr; gap: 8px; padding: 9px 10px; border-bottom: 1px solid var(--border); }.feedback-notification-center article:last-child { border-bottom: 0; }.feedback-notification-center article i { width: 7px; height: 7px; margin-top: 5px; border-radius: 50%; background: transparent; }.feedback-notification-center article.unread { background: var(--blue-soft); }.feedback-notification-center article.unread i { background: var(--feedback-blue); }.feedback-notification-center article span { display: block; color: var(--muted); font-size: .82em; }

.feedback-field { display: grid; gap: 6px; width: 100%; font-weight: 700; }.feedback-field input, .feedback-form-validation input, .feedback-form-validation select { width: 100%; border: 1px solid var(--border-strong); border-radius: 5px; background: var(--surface); padding: 8px; outline: none; }.feedback-field small { font-weight: 600; }.feedback-field.error input { border: 2px solid var(--feedback-danger); }.feedback-field.error small { color: var(--feedback-danger); }.feedback-field.success > div { position: relative; }.feedback-field.success input { border: 2px solid var(--feedback-success); padding-right: 34px; }.feedback-field.success b { position: absolute; top: 8px; right: 10px; color: var(--feedback-success); }.feedback-field.success small { color: var(--feedback-success); }
.feedback-error-summary { width: 100%; border: 3px solid var(--feedback-danger); padding: 12px; }.feedback-error-summary strong { font-size: 1.16em; }.feedback-error-summary ul { margin: 7px 0 0; padding-left: 20px; }.feedback-error-summary a { color: #a51d1d; text-decoration: underline; }
.feedback-form-validation { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; }.feedback-form-validation > strong, .feedback-form-validation button { grid-column: 1 / -1; }.feedback-form-validation label { display: grid; gap: 3px; font-size: .84em; font-weight: 700; }.feedback-form-validation label.error { color: var(--feedback-danger); }.feedback-form-validation label.error input { border: 2px solid var(--feedback-danger); }.feedback-form-validation small { font-weight: 600; }.feedback-form-validation button, .feedback-confirmation button { justify-self: start; border: 0; border-radius: 5px; background: var(--feedback-blue); color: white; padding: 7px 10px; font-weight: 700; }

.feedback-confirmation { display: grid; justify-items: center; gap: 4px; width: 100%; border-radius: 8px; background: #e8f6ee; padding: 14px; text-align: center; }.feedback-confirmation > span { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 50%; background: var(--feedback-success); color: white; font-size: 20px; }.feedback-confirmation > strong { color: #0d5c35; font-size: 1.18em; }.feedback-confirmation p { color: #254c39; }.feedback-confirmation small { color: #486b59; }.feedback-confirmation button { margin-top: 5px; background: #176b42; }
.feedback-save-status, .feedback-refresh-demo, .feedback-sync-demo { display: flex; align-items: center; gap: 10px; width: 100%; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); padding: 10px 11px; }.feedback-save-status > span, .feedback-sync-demo > span { display: grid; width: 28px; height: 28px; place-items: center; border-radius: 50%; background: #e8f6ee; color: var(--feedback-success); font-weight: 800; }.feedback-save-status div, .feedback-sync-demo div { display: grid; flex: 1; }.feedback-save-status small, .feedback-refresh-demo small, .feedback-sync-demo p { color: var(--muted); }.feedback-save-status button, .feedback-refresh-demo button, .feedback-sync-demo button { border: 0; background: transparent; color: var(--feedback-blue); font-weight: 700; }
.feedback-copy-demo { display: flex; align-items: center; gap: 8px; width: 100%; border: 1px solid var(--border); border-radius: 7px; background: var(--surface); padding: 10px; }.feedback-copy-demo code { flex: 1; font-family: "IBM Plex Mono", monospace; }.feedback-copy-demo button { border: 0; border-radius: 5px; background: var(--feedback-blue); color: white; padding: 6px 9px; font-weight: 700; }.feedback-copy-demo span { position: absolute; left: -9999px; }
.feedback-undo-demo { display: grid; grid-template-columns: 28px 1fr auto; align-items: center; gap: 10px; width: 100%; border: 1px solid var(--border); border-radius: 7px; background: #202938; color: white; padding: 11px; }.feedback-undo-demo > span { font-size: 20px; }.feedback-undo-demo p { margin: 0; color: white; }.feedback-undo-demo small { display: block; color: #c6cedb; }.feedback-undo-demo button { border: 0; background: transparent; color: #8eb8ff; font-weight: 800; }
.feedback-danger-demo { display: grid; grid-template-columns: 28px 1fr; gap: 9px; width: 100%; border: 1px solid color-mix(in srgb, var(--feedback-danger) 40%, var(--border)); border-radius: 8px; background: var(--surface); padding: 12px; }.feedback-danger-demo > span { display: grid; width: 26px; height: 26px; place-items: center; border-radius: 50%; background: #feecec; color: var(--feedback-danger); font-weight: 800; }.feedback-danger-demo footer { display: flex; grid-column: 1 / -1; justify-content: flex-end; gap: 7px; }.feedback-danger-demo button { border: 1px solid var(--border-strong); border-radius: 5px; background: var(--surface); padding: 6px 9px; font-weight: 700; }.feedback-danger-demo button.danger { border-color: var(--feedback-danger); background: var(--feedback-danger); color: white; }

.feedback-spinner-demo { display: grid; justify-items: center; gap: 7px; text-align: center; }.feedback-spinner-demo small { color: var(--muted); }.feedback-spinner { display: inline-block; width: 23px; height: 23px; flex: 0 0 auto; border: 3px solid var(--border); border-top-color: var(--feedback-blue); border-radius: 50%; animation: feedback-spin .9s linear infinite; }
@keyframes feedback-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .feedback-spinner { animation: none; border-color: var(--border); border-top-color: var(--feedback-blue); } }
.feedback-skeleton { display: grid; grid-template-columns: 42px 1fr; gap: 9px; width: 100%; }.feedback-skeleton span, .feedback-skeleton i, .feedback-skeleton b { display: block; border-radius: 5px; background: linear-gradient(100deg, var(--surface-selected) 30%, color-mix(in srgb, var(--surface-selected) 65%, white) 48%, var(--surface-selected) 66%); background-size: 200% 100%; animation: feedback-shimmer 1.4s linear infinite; }.feedback-skeleton .avatar { grid-row: 1; width: 42px; height: 42px; border-radius: 50%; }.feedback-skeleton > div:not(.cards) { display: grid; align-content: center; gap: 7px; }.feedback-skeleton i { height: 9px; }.feedback-skeleton i.short { width: 45%; }.feedback-skeleton > i { grid-column: 1 / -1; }.feedback-skeleton .cards { display: grid; grid-column: 1 / -1; grid-template-columns: repeat(3, 1fr); gap: 7px; }.feedback-skeleton .cards b { height: 45px; }
@keyframes feedback-shimmer { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .feedback-skeleton span, .feedback-skeleton i, .feedback-skeleton b { animation: none; } }
.feedback-overlay-demo { position: relative; width: 100%; min-height: 126px; overflow: hidden; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); }.feedback-overlay-demo > div { display: grid; gap: 9px; padding: 12px; }.feedback-overlay-demo > div span { height: 12px; border-radius: 4px; background: var(--surface-selected); }.feedback-overlay-demo > div span:nth-child(3) { width: 75%; }.feedback-overlay-demo > div span:nth-child(4) { width: 55%; }.feedback-overlay-demo aside { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 6px; background: color-mix(in srgb, var(--surface) 88%, transparent); }.feedback-overlay-demo aside button { border: 0; background: transparent; color: var(--feedback-blue); font-size: .82em; }
.feedback-button-demo { display: grid; justify-items: center; gap: 7px; }.feedback-button-demo > button { display: flex; min-width: 135px; align-items: center; justify-content: center; gap: 7px; border: 0; border-radius: 6px; background: var(--feedback-blue); color: white; padding: 10px 14px; font-weight: 700; }.feedback-button-demo .feedback-spinner { display: none; width: 16px; height: 16px; border-width: 2px; border-color: rgba(255,255,255,.45); border-top-color: white; }.feedback-button-demo button.loading .feedback-spinner { display: inline-block; }.feedback-button-demo small { min-height: 17px; color: var(--feedback-success); }
.feedback-indeterminate-demo { display: grid; gap: 7px; width: 100%; }.feedback-indeterminate-demo > div { position: relative; height: 5px; overflow: hidden; border-radius: 99px; background: var(--surface-selected); }.feedback-indeterminate-demo > div span { position: absolute; width: 45%; height: 100%; border-radius: inherit; background: var(--feedback-blue); animation: feedback-slide 1.3s ease-in-out infinite; }.feedback-indeterminate-demo small { color: var(--muted); }
@keyframes feedback-slide { from { left: -45%; } to { left: 100%; } }
@media (prefers-reduced-motion: reduce) { .feedback-indeterminate-demo > div span { left: 25%; animation: none; } }
.feedback-progress { position: relative; height: 16px; overflow: hidden; border-radius: 99px; background: var(--surface-selected); }.feedback-progress > span { display: block; height: 100%; border-radius: inherit; background: var(--feedback-blue); transition: width .25s ease; }.feedback-progress > b { position: absolute; inset: 0; color: white; font-size: 10px; line-height: 16px; text-align: center; text-shadow: 0 1px 2px rgba(0,0,0,.4); }
.feedback-upload-demo, .feedback-task-demo { display: grid; gap: 9px; width: 100%; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); padding: 11px; }.feedback-upload-demo header, .feedback-task-demo header { display: flex; align-items: center; gap: 9px; }.feedback-upload-demo header > span { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 5px; background: var(--blue-soft); color: var(--feedback-blue); font-size: .75em; font-weight: 800; }.feedback-upload-demo header div, .feedback-task-demo header div { display: grid; flex: 1; }.feedback-upload-demo small, .feedback-task-demo small { color: var(--muted); }.feedback-upload-demo header button { display: grid; width: 28px; height: 28px; place-items: center; border: 1px solid var(--border); border-radius: 50%; background: var(--surface); color: var(--feedback-blue); }.feedback-upload-demo footer, .feedback-task-demo footer { display: flex; justify-content: space-between; color: var(--muted); font-size: .82em; }.feedback-upload-demo footer button, .feedback-task-demo footer button { border: 0; background: transparent; color: var(--feedback-blue); font-weight: 700; }.feedback-task-demo.paused .feedback-spinner { animation-play-state: paused; }
.feedback-step-demo { width: 100%; }.feedback-step-demo ol { display: grid; grid-template-columns: repeat(3, 1fr); margin: 0 0 13px; padding: 0; list-style: none; }.feedback-step-demo li { position: relative; display: grid; justify-items: center; gap: 4px; color: var(--muted); font-size: .76em; }.feedback-step-demo li::before { content: ""; position: absolute; top: 11px; right: 50%; left: -50%; height: 3px; background: var(--border); }.feedback-step-demo li:first-child::before { display: none; }.feedback-step-demo li span { z-index: 1; display: grid; width: 24px; height: 24px; place-items: center; border: 2px solid var(--border-strong); border-radius: 50%; background: var(--surface); }.feedback-step-demo li.complete span { border-color: var(--feedback-success); background: var(--feedback-success); color: white; }.feedback-step-demo li.complete::before, .feedback-step-demo li.current::before { background: var(--feedback-success); }.feedback-step-demo li.current { color: var(--text); }.feedback-step-demo li.current span { border-color: var(--feedback-blue); color: var(--feedback-blue); }.feedback-step-demo > div { display: flex; align-items: center; gap: 8px; }.feedback-step-demo > div small { color: var(--muted); }.feedback-step-demo > div strong { flex: 1; }.feedback-step-demo > div button { border: 0; border-radius: 5px; background: var(--feedback-blue); color: white; padding: 6px 9px; font-weight: 700; }
.feedback-refresh-demo div { display: grid; flex: 1; }

.feedback-empty-demo, .feedback-state-demo, .feedback-page-state { display: grid; justify-items: center; gap: 5px; width: 100%; padding: 9px; text-align: center; }.feedback-empty-demo > span, .feedback-state-demo > span, .feedback-page-state > span { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 50%; background: var(--blue-soft); color: var(--feedback-blue); font-size: 21px; }.feedback-empty-demo p, .feedback-state-demo p, .feedback-page-state p { max-width: 300px; }.feedback-empty-demo button, .feedback-state-demo button, .feedback-page-state button { margin-top: 4px; border: 0; border-radius: 5px; background: var(--feedback-blue); color: white; padding: 7px 10px; font-weight: 700; }.feedback-empty-demo.search button { background: transparent; color: var(--feedback-blue); }.feedback-state-demo.error > span { background: #feecec; color: var(--feedback-danger); }.feedback-state-demo.offline > span { background: #eef0f4; color: #465263; }.feedback-state-demo.resolved > span { background: #e8f6ee; color: var(--feedback-success); }
.feedback-reconnect-demo, .feedback-session-demo, .feedback-rate-demo { display: grid; grid-template-columns: 32px 1fr auto; align-items: center; gap: 10px; width: 100%; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); padding: 11px; }.feedback-reconnect-demo p, .feedback-session-demo p, .feedback-rate-demo p { margin-top: 2px; }.feedback-reconnect-demo button, .feedback-session-demo button { border: 0; background: transparent; color: var(--feedback-blue); font-weight: 700; }.feedback-session-demo > span, .feedback-rate-demo > span { display: grid; width: 31px; height: 31px; place-items: center; border-radius: 50%; background: var(--blue-soft); color: var(--feedback-blue); font-size: 18px; }.feedback-rate-demo button { border: 0; border-radius: 5px; background: var(--surface-selected); padding: 6px 9px; }.feedback-page-state > small { color: var(--feedback-blue); font: 700 2em "IBM Plex Mono", monospace; }

.concept-card-preview .feedback-demo { width: 100%; min-width: 0; overflow: hidden; font-size: 10px; }
.concept-card-preview .feedback-demo > *, .concept-card-preview .feedback-demo div, .concept-card-preview .feedback-demo p, .concept-card-preview .feedback-demo strong, .concept-card-preview .feedback-demo span { min-width: 0; overflow-wrap: anywhere; }
.concept-card-preview .feedback-message { padding: 8px; }.concept-card-preview .feedback-message p, .concept-card-preview .feedback-callout p, .concept-card-preview .feedback-section-message p { font-size: .92em; }
.concept-card-preview .feedback-site-alert { grid-template-columns: 18px 1fr 18px; }.concept-card-preview .feedback-site-alert a { display: none; }
.concept-card-preview .feedback-banner { flex-direction: column; align-items: stretch; }.concept-card-preview .feedback-banner button { align-self: start; padding: 5px 7px; }
.concept-card-preview .feedback-actionable { grid-template-columns: 19px 1fr; }.concept-card-preview .feedback-actionable > button { grid-column: 2; justify-self: start; }
.concept-card-preview .feedback-notification-center article { padding: 6px 8px; }
.concept-card-preview .feedback-form-validation { gap: 5px; }.concept-card-preview .feedback-form-validation input, .concept-card-preview .feedback-form-validation select { padding: 5px; }
.concept-card-preview .feedback-confirmation { padding: 8px; }.concept-card-preview .feedback-confirmation small { display: none; }
.concept-card-preview .feedback-save-status, .concept-card-preview .feedback-sync-demo { display: grid; grid-template-columns: 25px 1fr; padding: 7px; }.concept-card-preview .feedback-save-status button, .concept-card-preview .feedback-sync-demo button { grid-column: 2; justify-self: start; padding: 0; font-size: .82em; }
.concept-card-preview .feedback-undo-demo { grid-template-columns: 22px 1fr; }.concept-card-preview .feedback-undo-demo button { grid-column: 2; justify-self: start; }
.concept-card-preview .feedback-danger-demo { padding: 8px; }.concept-card-preview .feedback-danger-demo footer { gap: 4px; }
.concept-card-preview .feedback-skeleton .cards b { height: 34px; }
.concept-card-preview .feedback-button-demo > button { width: 100%; min-width: 0; padding-inline: 7px; }
.concept-card-preview .feedback-step-demo > div { display: grid; grid-template-columns: 1fr auto; }.concept-card-preview .feedback-step-demo > div strong { grid-column: 1; }.concept-card-preview .feedback-step-demo > div button { grid-column: 2; grid-row: 1 / 3; }
.concept-card-preview .feedback-upload-demo, .concept-card-preview .feedback-task-demo { padding: 8px; }
.concept-card-preview .feedback-upload-demo header button { flex: 0 0 24px; width: 24px; height: 24px; }
.concept-card-preview .feedback-refresh-demo { display: grid; grid-template-columns: 1fr; }.concept-card-preview .feedback-refresh-demo button { justify-self: start; padding: 0; }
.concept-card-preview .feedback-reconnect-demo, .concept-card-preview .feedback-session-demo, .concept-card-preview .feedback-rate-demo { grid-template-columns: 26px 1fr; padding: 8px; }.concept-card-preview .feedback-reconnect-demo button, .concept-card-preview .feedback-session-demo button, .concept-card-preview .feedback-rate-demo button { grid-column: 2; justify-self: start; padding: 0; }

@media (max-width: 620px) {
  .feedback-site-alert { grid-template-columns: 22px 1fr 22px; }.feedback-site-alert a { display: none; }
  .feedback-banner, .feedback-actionable { align-items: flex-start; flex-direction: column; }
  .feedback-actionable { grid-template-columns: 22px 1fr; }.feedback-actionable > button { grid-column: 2; justify-self: start; }
  .feedback-form-validation { grid-template-columns: 1fr; }.feedback-form-validation > strong, .feedback-form-validation button { grid-column: 1; }
  .feedback-reconnect-demo, .feedback-session-demo, .feedback-rate-demo { grid-template-columns: 32px 1fr; }.feedback-reconnect-demo button, .feedback-session-demo button, .feedback-rate-demo button { grid-column: 2; justify-self: start; }
}