harbor-net/src/web/styles/features/instructions.css

.client-instructions {
  width: min(470px, 100vw);
}

.client-instruction-list {
  display: grid;
  gap: 15px;
}

.client-instruction-block {
  border: 0;
  border-radius: 22px;
  background: color-mix(in oklch, var(--client-panel) 56%, var(--client-bg));
  box-shadow: 0 14px 36px oklch(0.1 0.015 145 / 0.065);
  transition: background 300ms ease, box-shadow 500ms ease, transform 500ms cubic-bezier(0.16, 1, 0.3, 1);
}

.client-instruction-block:nth-child(even) {
  margin-left: 12px;
}

.client-instruction-block:nth-child(3n) {
  margin-right: 9px;
}

.client-instruction-block:hover,
.client-instruction-block.is-open {
  background: color-mix(in oklch, var(--client-panel) 68%, var(--client-bg));
  box-shadow: 0 20px 48px oklch(0.1 0.015 145 / 0.095);
  transform: translateY(-2px);
}

.client-instruction-block.is-open {
  animation: client-instruction-promote 520ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes client-instruction-promote {
  from { opacity: 0.72; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(-2px); }
}

::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
}

::view-transition-group(*) {
  animation-duration: 420ms;
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}

::view-transition-group(instruction-proxybridge),
::view-transition-group(instruction-switchyomega),
::view-transition-group(instruction-vscode),
::view-transition-group(instruction-router) {
  animation-duration: 560ms;
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}

.client-instruction-summary {
  position: relative;
  width: 100%;
  display: grid;
  gap: 7px;
  padding: 21px 46px 21px 22px;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.client-instruction-summary:focus-visible {
  outline: none;
}

.client-instruction-block:has(.client-instruction-summary:focus-visible) {
  background: color-mix(in oklch, var(--client-panel) 72%, var(--client-bg));
  box-shadow: 0 20px 48px oklch(0.1 0.015 145 / 0.11);
}

.client-instruction-summary > i {
  position: absolute;
  top: 27px;
  right: 20px;
  width: 12px;
  height: 12px;
}

.client-instruction-summary > i::before,
.client-instruction-summary > i::after {
  content: '';
  position: absolute;
  top: 5px;
  left: 0;
  width: 12px;
  height: 1px;
  background: var(--client-muted);
  transform-origin: center;
  transition: transform 520ms cubic-bezier(0.16, 1, 0.3, 1), opacity 360ms ease;
}

.client-instruction-summary > i::after {
  transform: rotate(90deg);
}

.client-instruction-block.is-open .client-instruction-summary > i::after {
  opacity: 0;
  transform: rotate(180deg);
}

.client-instruction-block.is-open .client-instruction-summary > i::before {
  transform: rotate(180deg);
}

.client-instruction-summary strong {
  font: var(--type-item-title);
  letter-spacing: var(--type-item-title-tracking);
  text-transform: var(--type-item-title-transform);
}

.client-instruction-summary small {
  max-width: 54ch;
  color: var(--client-muted);
  font: var(--type-control);
  letter-spacing: var(--type-control-tracking);
  text-transform: var(--type-control-transform);
}

.client-instruction-reveal {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  filter: blur(4px);
  transition: grid-template-rows 600ms cubic-bezier(0.16, 1, 0.3, 1), opacity 420ms ease, filter 500ms ease;
}

.client-instruction-block.is-open .client-instruction-reveal {
  grid-template-rows: 1fr;
  opacity: 1;
  filter: blur(0);
}

.client-instruction-body {
  min-height: 0;
  overflow: hidden;
  display: grid;
  gap: 14px;
  padding: 0 22px 24px;
  color: var(--client-muted);
  font: var(--type-body);
  letter-spacing: var(--type-body-tracking);
  text-transform: var(--type-body-transform);
}

.client-instruction-body p,
.client-instruction-body ol {
  margin: 0;
}

.client-instruction-body ol {
  display: grid;
  gap: 9px;
  padding-left: 22px;
}

.client-instruction-body li::marker {
  color: var(--client-accent);
  font-variant-numeric: var(--numeric-tabular);
}

.client-instruction-body code {
  display: block;
  overflow-x: auto;
  padding: 12px 14px;
  border-radius: 12px;
  background: color-mix(in oklch, var(--client-control) 84%, transparent);
  color: var(--client-text);
  font: var(--type-body);
  letter-spacing: var(--type-body-tracking);
  text-transform: var(--type-body-transform);
  white-space: nowrap;
}

.client-instruction-code {
  max-width: 100%;
  margin: 0;
  overflow-x: auto;
  padding: 12px 14px;
  border-radius: 12px;
  background: color-mix(in oklch, var(--client-control) 84%, transparent);
}

.client-instruction-code code {
  overflow: visible;
  padding: 0;
  border-radius: 0;
  background: transparent;
  white-space: pre;
}

.client-instruction-copies {
  position: relative;
  display: grid;
  gap: 7px;
}

.client-instruction-copy {
  min-height: 34px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.client-instruction-copy > span {
  min-width: 0;
  overflow: hidden;
  color: var(--client-text);
  font: var(--type-control);
  letter-spacing: var(--type-control-tracking);
  text-transform: var(--type-control-transform);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.client-instruction-body .client-instruction-note {
  padding: 11px 13px;
  border-radius: 12px;
  background: color-mix(in oklch, var(--client-control) 48%, transparent);
  color: var(--client-text);
}

.client-instruction-body a {
  width: fit-content;
  color: var(--client-accent);
  font-weight: var(--font-weight-bold);
  text-decoration: none;
}

.client-instruction-body a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}