/* Use the source page's typography and palette for the shared note flow. */
.website-feedback {
  --wf-heading:var(--display,var(--ink));
  --wf-muted:var(--muted,var(--body));
  --wf-link:var(--link,var(--teal));
  --wf-focus:var(--focus,var(--teal));
  --wf-control-border:var(--control-border,#8294aa);
  --wf-control-surface:var(--surface,#fff);
  --wf-control-text:var(--body,var(--ink));
  --wf-action:var(--display,var(--ink));
  --wf-action-text:var(--surface,#fff);
  box-sizing:border-box;
  width:min(40rem,calc(100% - 2rem));
  max-height:calc(100dvh - 2rem);
  overflow:auto;
  border:1px solid var(--line);
  border-radius:6px;
  padding:clamp(1.25rem,4vw,2rem);
  background:var(--surface,var(--paper));
  color:var(--body,var(--ink));
  font:inherit;
  line-height:1.6;
  text-align:left;
  box-shadow:0 24px 70px #07182966;
}
.experience .website-feedback {
  --wf-heading:inherit;
  --wf-muted:var(--muted);
  --wf-link:var(--cyan);
  --wf-focus:var(--cyan);
  --wf-control-border:#8294aa;
  --wf-control-surface:#fff;
  --wf-control-text:var(--ink);
  --wf-action:var(--paper);
  --wf-action-text:var(--ink);
  background:inherit;
  color:inherit;
  color-scheme:light;
}
.website-feedback::backdrop { background:rgb(7 15 28 / .72); }
.website-feedback *, .website-feedback *::before { box-sizing:border-box; }
.website-feedback h2 { margin:0 0 .75rem; font-family:inherit; font-weight:500; font-size:clamp(1.75rem,5vw,2.25rem); line-height:1.12; letter-spacing:-.045em; color:var(--wf-heading); }
.website-feedback label { display:block; margin:1.25rem 0 .5rem; font-size:.9rem; font-weight:500; }
.website-feedback label span { font-weight:400; }
.website-feedback input, .website-feedback select, .website-feedback textarea { width:100%; min-height:48px; padding:.75rem; border:1px solid var(--wf-control-border); border-radius:3px; background:var(--wf-control-surface); color:var(--wf-control-text); font:inherit; font-size:1rem; line-height:1.5; }
.website-feedback select { appearance:none; padding-right:2.5rem; background-image:linear-gradient(45deg,transparent 50%,var(--wf-control-text) 50%),linear-gradient(135deg,var(--wf-control-text) 50%,transparent 50%); background-position:calc(100% - 19px) 50%,calc(100% - 14px) 50%; background-size:5px 5px; background-repeat:no-repeat; }
.website-feedback textarea { resize:vertical; }
.website-feedback a { color:var(--wf-link); text-decoration:underline; text-underline-offset:.25em; }
.website-feedback button { min-height:48px; padding:.75rem 1.375rem; border:1px solid var(--wf-control-border); border-radius:3px; font:inherit; font-size:.85rem; font-weight:500; line-height:1.5; cursor:pointer; }
.website-feedback .wf-submit { background:var(--wf-action); color:var(--wf-action-text); border-color:transparent; }
.website-feedback .wf-close { display:block; margin:0 0 1.5rem auto; background:transparent; color:inherit; }
.website-feedback button:disabled { opacity:.6; cursor:wait; }
.website-feedback .wf-note { font-size:.8rem; line-height:1.65; color:var(--wf-muted); margin:.65rem 0 1rem; }
.website-feedback .wf-page { color:var(--wf-muted); font-size:.85rem; overflow-wrap:anywhere; }
.website-feedback .wf-trap { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
.website-feedback [hidden] { display:none !important; }
.website-feedback :focus-visible { outline:3px solid var(--wf-focus); outline-offset:4px; box-shadow:none; }
.website-feedback h2:focus { outline:none; }
.website-feedback .wf-status { overflow-wrap:anywhere; }
.website-feedback .wf-status:empty { display:none; }
.feedback-footer { padding:1.5rem; text-align:center; }
.website-feedback fieldset { margin:1rem 0; border:1px solid var(--line); padding:.75rem; }
.website-feedback legend { font-weight:500; }
.website-feedback .wf-check { display:inline-flex; align-items:center; margin:.25rem .75rem .25rem 0; min-height:44px; gap:.5rem; font-weight:400; }
.website-feedback .wf-check input { width:1.25rem; min-height:1.25rem; height:1.25rem; padding:0; }
@media (forced-colors:active) { .website-feedback select { appearance:auto; background-image:none; } }