:root {
  --content-padding: 16px;
}

body {
  padding: 16px;
  background: var(--desktop-background);
}

#app {
  padding-bottom: 16px;
}

#app > a2k-panel {
  display: flex;
}

main {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
}

main > a2k-panel {
  --panel-color-background: white;

  max-width: 90ch;
  margin: 0 auto;
}

main > a2k-panel * {
  --panel-color-background: var(--color-gray-500);
}

nav {
  padding: 8px;
  min-width: 180px;
}

code {
  word-break: break-all;
}

.content {
  padding: var(--content-padding);
}

details[open] summary > .icon {
  transform: rotate(90deg);
}

summary {
  list-style-type: none;
  cursor: var(--cursor-pointer);
  display: flex;
  align-items: center;
  gap: 8px;
}

summary > .icon {
  display: inline-block;
  width: fit-content;
  font-size: 8px;
}

#app > a2k-panel {
  z-index: 1;
}

a2k-panel > p {
  margin-block: 16px;
}

.stack-spacing-100 > * {
  --stack-spacing: 8px;
}

.stack-spacing-200 > * {
  --stack-spacing: 16px;
}

.stack-spacing-300 > * {
  --stack-spacing: 32px;
}

.stack {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.stack > * {
  margin-block: 0;
}

.stack > * + * {
  margin-block-start: var(--stack-spacing);
}

.with-sidebar {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.width-sidebar > :last-child {
  flex-basis: 0;
  flex-grow: 999;
  min-inline-size: 20%;
}

.links {
  padding-inline: 8px;
}

.icons {
  font-size: 1.5rem;
  gap: 16px;
  display: flex;
  flex-wrap: wrap;
}

.desktop-icons {
  --desktop-icon-text-color: var(--color-black);
  --desktop-icon-text-color-focus: var(--color-white);

  display: flex;
  flex-wrap: wrap;
}

.input-wrapper {
  max-width: 360px;
}

.cover-image {
  width: 100%;
  aspect-ratio: 2 / 1;
}

main > a2k-marquee {
  --marquee-animation-duration: 30s;

  position: absolute;
  top: 16px;
  left: 0;
  width: 100%;
}
