* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--background);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 15px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
main { max-width: 808px; margin: 38px auto 64px; padding: 0 24px; }
form {
  position: sticky;
  top: 24px;
  z-index: 5;
  margin: 0 0 34px;
  background: var(--surface);
  border: 1px solid var(--field-border);
  border-radius: 16px;
  box-shadow: var(--field-shadow);
  transition: border-color .16s, box-shadow .16s;
}
form:focus-within {
  border-color: var(--focus-border);
  box-shadow: var(--focus-shadow);
}
form::before {
  content: '';
  position: absolute;
  top: -25px;
  left: -1px;
  right: -1px;
  height: 24px;
  background: var(--background);
  pointer-events: none;
}
.search-icon {
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  width: 21px;
  height: 21px;
  fill: none;
  stroke: var(--icon);
  stroke-width: 1.7;
  stroke-linecap: round;
  pointer-events: none;
}
input {
  display: block;
  width: 100%;
  min-width: 0;
  height: 62px;
  border: 0;
  border-radius: inherit;
  outline: none;
  padding: 16px 20px 16px 54px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 17px;
  letter-spacing: -.15px;
}
input::placeholder { color: var(--placeholder); }
input::-webkit-search-cancel-button { cursor: pointer; opacity: .55; }
ol { margin: 0; padding: 0; list-style: none; transition: opacity .15s; }
li { padding: 24px 8px 27px; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
li:first-child { padding-top: 0; }
li:last-child { border-bottom: 0; }
h2 { margin: 6px 0 9px; font-size: 21px; font-weight: 550; letter-spacing: -.45px; line-height: 1.4; }
a { color: var(--ink); text-decoration: none; transition: color .14s; }
a:hover { color: var(--accent); text-decoration: none; }
a:focus-visible { outline: 2px solid #819fce; outline-offset: 4px; border-radius: 3px; }
.url { color: var(--muted); font-size: 13px; line-height: 1.5; margin: 0; letter-spacing: .05px; }
.description { margin: 0; color: var(--body); font-size: 14px; line-height: 1.75; }
mark { background: var(--mark); color: var(--mark-ink); padding: 0 1px; border-radius: 3px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
ol[aria-busy='true'] { opacity: .5; }
#message { color: var(--muted); margin: 20px 8px 14px; font-size: 13px; }
#message:empty { display: none; }
#sentinel { height: 1px; }
@media (max-width: 540px) {
  main { margin: 24px auto 40px; padding: 0 18px; }
  form { top: 16px; margin-bottom: 30px; border-radius: 14px; }
  form::before { top: -17px; height: 16px; }
  input { height: 56px; padding-left: 48px; font-size: 16px; }
  .search-icon { left: 17px; width: 19px; height: 19px; }
  li { padding: 23px 5px 25px; }
  h2 { font-size: 19px; letter-spacing: -.3px; margin-top: 6px; margin-bottom: 8px; }
  .description { font-size: 14px; line-height: 1.7; }
  .url { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; } }