.ide-main {
  padding-block: var(--space-6);
  background: var(--agate-blush);
}

.ide-main :focus-visible {
  outline-color: var(--agate-ink);
}

.workspace-toolbar :focus-visible {
  outline-color: var(--agate-cream);
}

.ide-intro {
  display: flex;
  margin-bottom: var(--space-6);
  align-items: end;
  justify-content: space-between;
  gap: var(--space-6);
}

.ide-intro h1 {
  margin-bottom: var(--space-3);
  color: var(--agate-berry);
  font-size: clamp(2rem, 1.7rem + 1.4vw, 3.2rem);
}

.ide-intro p {
  margin-bottom: 0;
  color: var(--agate-plum);
}

.phase-status {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: var(--space-2);
  padding: 0.5rem 0.8rem;
  border: var(--rule-medium) solid var(--agate-ink);
  background: var(--agate-rose);
  color: var(--agate-ink);
  font-size: var(--text-xs);
  font-weight: 850;
}

.phase-status::before {
  width: 0.65rem;
  height: 0.65rem;
  border: var(--rule-thin) solid var(--agate-ink);
  background: var(--agate-magenta);
  content: "";
}

.workspace-shell {
  overflow: hidden;
  border: var(--rule-heavy) solid var(--agate-ink);
  background: var(--agate-cream);
}

.workspace-toolbar {
  display: flex;
  min-height: 4.5rem;
  padding: var(--space-4);
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  border-bottom: var(--rule-heavy) solid var(--agate-ink);
  background: var(--agate-berry);
  color: var(--agate-cream);
}

.workspace-toolbar h2 {
  margin: 0;
  font-size: var(--text-sm);
}

.workspace-toolbar p {
  margin: 0;
  color: var(--color-on-red-muted);
  font-size: var(--text-xs);
}

.workspace-summary {
  flex: 1 1 12rem;
  min-width: 0;
}

.workspace-summary p {
  overflow-wrap: anywhere;
}

.workspace-summary p + p {
  margin-top: var(--space-1);
}

.workspace-actions,
.conflict-actions,
.dialog-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-2);
}

.workspace-actions {
  flex: 1 1 34rem;
}

.ide-action {
  appearance: none;
  min-height: 2.75rem;
  padding: 0.55rem 0.75rem;
  border: var(--rule-medium) solid var(--agate-ink);
  background: var(--agate-cream);
  color: var(--agate-ink);
  cursor: pointer;
  font-size: var(--text-xs);
  font-weight: 850;
  line-height: 1.2;
}

.ide-action:hover {
  background: var(--agate-red-light);
}

.ide-action--danger {
  border-color: var(--agate-cream);
  background: var(--agate-ink);
  color: var(--agate-cream);
}

.ide-action--danger:hover {
  background: var(--agate-magenta);
  color: var(--agate-ink);
}

.ide-action:disabled {
  border-color: var(--agate-muted);
  background: var(--agate-blush);
  color: var(--agate-muted);
  cursor: not-allowed;
}

.action-feedback,
.snippet-recovery,
.conflict-notice,
.manual-copy {
  margin: 0;
  padding: var(--space-4);
  border-bottom: var(--rule-heavy) solid var(--agate-ink);
  overflow-wrap: anywhere;
}

.action-feedback {
  max-width: none;
  background: var(--agate-red-light);
  color: var(--agate-ink);
  font-size: var(--text-sm);
  font-weight: 750;
}

.action-feedback[data-state="error"] {
  background: var(--agate-magenta);
}

.snippet-recovery {
  max-width: none;
  background: var(--agate-cream);
  color: var(--agate-ink);
  font-size: var(--text-sm);
  font-weight: 750;
}

.snippet-recovery a {
  color: var(--agate-berry);
}

.conflict-notice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  background: var(--agate-rose);
}

.conflict-notice h3,
.manual-copy h3 {
  margin-bottom: var(--space-2);
  font-size: var(--text-sm);
}

.conflict-notice p,
.manual-copy p {
  margin: 0;
  color: var(--agate-ink);
  font-size: var(--text-sm);
}

.manual-copy {
  display: grid;
  gap: var(--space-3);
  background: var(--agate-red-light);
}

.manual-copy label {
  font-size: var(--text-sm);
  font-weight: 850;
}

.manual-copy textarea {
  appearance: none;
  width: 100%;
  resize: vertical;
  border: var(--rule-medium) solid var(--agate-ink);
  background: var(--agate-cream);
  color: var(--agate-ink);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
}

.manual-copy .ide-action {
  justify-self: start;
}

.page-manager {
  border-bottom: var(--rule-heavy) solid var(--agate-ink);
  background: var(--agate-cream);
}

.page-manager__header {
  display: flex;
  min-height: 4rem;
  padding: var(--space-3) var(--space-4);
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  border-bottom: var(--rule-medium) solid var(--agate-ink);
  background: var(--agate-rose);
}

.page-manager__summary {
  flex: 1 1 10rem;
  min-width: 0;
}

.page-manager__summary h3,
.page-manager__summary p {
  margin: 0;
}

.page-manager__summary h3 {
  font-size: var(--text-sm);
}

.page-manager__summary p {
  color: var(--agate-plum);
  font-size: var(--text-xs);
}

.page-actions {
  display: flex;
  flex: 1 1 28rem;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-2);
}

.page-actions .ide-action--danger {
  border-color: var(--agate-ink);
}

.page-strip {
  overflow-x: auto;
  overscroll-behavior-inline: contain;
}

.page-list {
  display: flex;
  width: max-content;
  min-width: 100%;
  margin: 0;
  padding: 0;
  flex-wrap: nowrap;
  list-style: none;
}

.page-list__item {
  display: flex;
  flex: 0 0 auto;
}

.page-button {
  appearance: none;
  display: grid;
  min-width: 10rem;
  min-height: 4.25rem;
  padding: var(--space-2) var(--space-4);
  grid-template-columns: minmax(0, 1fr) auto;
  align-content: center;
  align-items: center;
  gap: 0 var(--space-2);
  border: 0;
  border-right: var(--rule-medium) solid var(--agate-ink);
  background: var(--agate-cream);
  color: var(--agate-ink);
  cursor: pointer;
  text-align: left;
}

.page-button:hover {
  background: var(--agate-red-light);
}

.page-button[aria-current="page"] {
  background: var(--agate-berry);
  color: var(--agate-cream);
}

.page-button:focus-visible {
  outline: var(--rule-medium) solid var(--agate-ink);
  outline-offset: -0.4rem;
}

.page-button[aria-current="page"]:focus-visible {
  outline-color: var(--agate-cream);
}

.page-button__name,
.page-button__path {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.page-button__name {
  font-size: var(--text-sm);
  font-weight: 850;
}

.page-button__path {
  grid-column: 1 / -1;
  color: var(--agate-plum);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
}

.page-button[aria-current="page"] .page-button__path {
  color: var(--agate-cream);
}

.page-button__badge {
  padding: 0.15rem 0.35rem;
  border: var(--rule-thin) solid currentColor;
  font-size: 0.65rem;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
}

.link-health {
  border-top: var(--rule-medium) solid var(--agate-ink);
  background: var(--agate-blush);
}

.link-health summary {
  display: grid;
  min-height: 3rem;
  padding: var(--space-3) var(--space-4);
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
  list-style: none;
}

.link-health summary::-webkit-details-marker {
  display: none;
}

.link-health summary::before {
  content: "+";
  font-family: var(--font-mono);
  font-weight: 900;
}

.link-health[open] summary::before {
  content: "−";
}

.link-health__label,
#link-health-summary {
  font-size: var(--text-xs);
  font-weight: 850;
}

#link-health-summary {
  justify-self: end;
  overflow-wrap: anywhere;
  text-align: right;
}

#link-health-summary[data-state="issues"],
#link-health-summary[data-state="limited"] {
  color: var(--agate-plum);
}

.link-health summary:focus-visible {
  outline-offset: -0.35rem;
}

.link-health__body {
  padding: var(--space-4);
  border-top: var(--rule-medium) solid var(--agate-ink);
  background: var(--agate-red-light);
}

.link-health__body p {
  max-width: 78ch;
  margin: 0;
  color: var(--agate-ink);
  font-size: var(--text-xs);
}

.link-health__body p + p {
  margin-top: var(--space-2);
}

.link-health__result {
  font-weight: 850;
}

.link-health__list {
  display: grid;
  margin: var(--space-3) 0 0;
  padding: 0;
  gap: var(--space-2);
  list-style: none;
}

.link-health__list[hidden] {
  display: none;
}

.link-health__list li {
  padding-top: var(--space-2);
  border-top: var(--rule-thin) solid var(--agate-ink);
  font-size: var(--text-xs);
  overflow-wrap: anywhere;
}

.link-health__list strong {
  font-weight: 900;
}

.link-health__list code {
  font-family: var(--font-mono);
}

.workspace-tabs {
  display: none;
  border-bottom: var(--rule-heavy) solid var(--agate-ink);
  background: var(--agate-red-light);
}

.workspace-tabs button {
  appearance: none;
  min-width: 0;
  min-height: 2.75rem;
  border: 0;
  border-right: var(--rule-medium) solid var(--agate-ink);
  background: var(--agate-red-light);
  color: var(--agate-ink);
  cursor: pointer;
  font-size: var(--text-sm);
  font-weight: 850;
}

.workspace-tabs button:last-child {
  border-right: 0;
}

.workspace-tabs button[aria-selected="true"] {
  background: var(--agate-berry);
  color: var(--agate-cream);
}

.workspace-tabs button:focus-visible {
  outline-color: var(--agate-ink);
  outline-offset: -0.35rem;
}

.workspace-tabs button[aria-selected="true"]:focus-visible {
  outline-color: var(--agate-cream);
}

.workspace-grid {
  display: grid;
  height: clamp(38rem, 72vh, 54rem);
  min-height: 38rem;
  grid-template-columns: minmax(20rem, 0.92fr) minmax(24rem, 1.08fr);
}

.editor-column {
  display: grid;
  min-width: 0;
  min-height: 0;
  grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
  border-right: var(--rule-heavy) solid var(--agate-ink);
}

.workspace-panel {
  min-width: 0;
  min-height: 0;
  background: var(--color-code-surface);
}

.workspace-panel[hidden],
.editor-column[hidden],
.action-feedback[hidden],
.snippet-recovery[hidden],
.conflict-notice[hidden],
.manual-copy[hidden],
.workspace-tabs[hidden] {
  display: none;
}

.editor-column .workspace-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
}

.editor-column .workspace-panel[hidden] {
  display: none;
}

.editor-column .workspace-panel + .workspace-panel {
  border-top: var(--rule-heavy) solid var(--agate-ink);
}

.workspace-panel__header {
  display: flex;
  min-height: 3rem;
  padding-inline: var(--space-4);
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  border-bottom: var(--rule-medium) solid var(--agate-ink);
  background: var(--agate-rose);
  color: var(--agate-ink);
}

.workspace-panel__header h3 {
  margin: 0;
  font-size: var(--text-sm);
}

.workspace-panel__header p {
  margin: 0;
  color: var(--agate-ink);
  font-size: var(--text-xs);
}

.workspace-panel__header > h3,
.workspace-panel__header > p,
.replacement-dialog h3,
.replacement-dialog p {
  min-width: 0;
  overflow-wrap: anywhere;
}

.workspace-panel__title {
  flex: 1 1 auto;
  min-width: 0;
}

.workspace-panel__title h3,
.workspace-panel__title p {
  overflow-wrap: anywhere;
}

.workspace-panel__header > .ide-action {
  flex: 0 0 auto;
}

.preview-controls {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: var(--space-2);
}

.preview-controls label {
  display: inline-flex;
  min-height: 2.75rem;
  align-items: center;
  gap: var(--space-2);
  color: var(--agate-ink);
  cursor: pointer;
  font-size: var(--text-xs);
  font-weight: 850;
}

.preview-controls input {
  appearance: none;
  width: 1.25rem;
  height: 1.25rem;
  margin: 0;
  border: var(--rule-medium) solid var(--agate-ink);
  background: var(--agate-cream);
}

.preview-controls input:checked {
  background-color: var(--agate-berry);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2 7l3 3 7-8' fill='none' stroke='%23f7efe6' stroke-width='3'/%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
}

.preview-controls .ide-action {
  background: var(--agate-berry);
  color: var(--agate-cream);
}

.editor-mount {
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: var(--agate-cream);
}

.editor-loading {
  margin: 0;
  padding: var(--space-5);
  color: var(--agate-plum);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
}

.preview-panel {
  display: grid;
  min-height: 0;
  grid-template-rows: auto minmax(0, 1fr);
  background: var(--agate-magenta);
}

.workspace-panel.workspace-panel--full-screen,
.editor-column .workspace-panel.workspace-panel--full-screen {
  width: 100vw;
  height: 100dvh;
  min-height: 0;
  border-top: 0;
  grid-template-rows: auto minmax(0, 1fr);
}

.workspace-panel--viewport-full-screen {
  position: fixed;
  z-index: 1000;
  inset: 0;
}

body.workspace-full-screen {
  overflow: hidden;
}

.workspace-panel--full-screen .preview-canvas {
  padding: clamp(0.5rem, 1.5vw, 1rem);
}

.preview-panel .workspace-panel__header {
  background: var(--agate-red-light);
}

.preview-canvas {
  display: grid;
  min-width: 0;
  min-height: 0;
  padding: clamp(0.8rem, 2vw, 1.5rem);
  background: var(--agate-magenta);
}

.preview-frame {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  border: var(--rule-heavy) solid var(--agate-ink);
  background: var(--agate-cream);
}

.replacement-dialog {
  appearance: none;
  width: min(calc(100% - 2rem), 32rem);
  max-height: calc(100dvh - 2rem);
  padding: var(--space-5);
  border: var(--rule-heavy) solid var(--agate-ink);
  background: var(--agate-cream);
  color: var(--agate-ink);
  overflow: auto;
}

.replacement-dialog::backdrop {
  background: var(--agate-berry);
}

.replacement-dialog h3 {
  color: var(--agate-berry);
}

.replacement-dialog p {
  color: var(--agate-plum);
}

.replacement-dialog .dialog-actions {
  margin-top: var(--space-5);
}

.replacement-dialog .ide-action--danger {
  border-color: var(--agate-ink);
}

.template-dialog {
  appearance: none;
  width: min(calc(100% - 2rem), 68rem);
  max-height: calc(100dvh - 2rem);
  padding: 0;
  border: var(--rule-heavy) solid var(--agate-ink);
  background: var(--agate-cream);
  color: var(--agate-ink);
  overflow: auto;
}

.template-dialog::backdrop {
  background: var(--agate-berry);
}

.template-dialog__header {
  display: grid;
  padding: var(--space-5);
  grid-template-columns: minmax(12rem, 0.8fr) minmax(16rem, 1fr);
  align-items: end;
  gap: var(--space-5);
  border-bottom: var(--rule-heavy) solid var(--agate-ink);
  background: var(--agate-rose);
}

.template-dialog__header h3,
.template-dialog__header p,
.template-dialog__status {
  margin: 0;
}

.template-dialog__header h3 {
  color: var(--agate-ink);
  font-size: clamp(1.5rem, 1.3rem + 1vw, 2.25rem);
}

.template-dialog__header .eyebrow {
  margin-bottom: var(--space-2);
  color: var(--agate-plum);
}

.template-dialog__header > p {
  color: var(--agate-ink);
}

.template-dialog__status {
  max-width: none;
  padding: var(--space-3) var(--space-5);
  border-bottom: var(--rule-medium) solid var(--agate-ink);
  background: var(--agate-red-light);
  color: var(--agate-ink);
  font-size: var(--text-sm);
  font-weight: 750;
}

.template-dialog__status[data-state="error"] {
  background: var(--agate-magenta);
}

.template-list {
  display: grid;
  margin: 0;
  padding: var(--space-5);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
  list-style: none;
}

.template-list[aria-busy="true"] {
  min-height: 10rem;
}

.template-card {
  appearance: none;
  display: grid;
  width: 100%;
  min-height: 100%;
  padding: var(--space-4);
  border: var(--rule-medium) solid var(--agate-ink);
  background: var(--agate-cream);
  color: var(--agate-ink);
  cursor: pointer;
  gap: var(--space-3);
  text-align: left;
}

.template-card:hover {
  background: var(--agate-red-light);
}

.template-card:disabled {
  background: var(--agate-blush);
  color: var(--agate-muted);
  cursor: wait;
}

.template-card__meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-2);
  color: var(--agate-plum);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.template-card__title {
  color: var(--agate-berry);
  font-size: var(--text-lg);
  font-weight: 900;
  line-height: 1.15;
}

.template-card__summary,
.template-card__pages {
  overflow-wrap: anywhere;
}

.template-card__summary {
  color: var(--agate-ink);
  font-size: var(--text-sm);
}

.template-card__pages {
  align-self: end;
  padding-top: var(--space-3);
  border-top: var(--rule-thin) solid var(--agate-ink);
  color: var(--agate-plum);
  font-size: var(--text-xs);
  font-weight: 750;
}

.template-dialog__footer {
  position: sticky;
  bottom: 0;
  display: flex;
  padding: var(--space-4) var(--space-5);
  justify-content: flex-end;
  border-top: var(--rule-heavy) solid var(--agate-ink);
  background: var(--agate-berry);
}

.template-dialog__footer :focus-visible {
  outline-color: var(--agate-cream);
}

.page-dialog form {
  display: grid;
  gap: var(--space-4);
}

.page-dialog h3,
.page-dialog p {
  margin: 0;
}

.page-dialog__field {
  display: grid;
  gap: var(--space-2);
}

.page-dialog__field label {
  font-size: var(--text-sm);
  font-weight: 850;
}

.page-dialog__field input {
  appearance: none;
  width: 100%;
  min-height: 2.75rem;
  padding: 0.55rem 0.7rem;
  border: var(--rule-medium) solid var(--agate-ink);
  background: var(--agate-cream);
  color: var(--agate-ink);
  font: inherit;
}

.page-dialog__field input[readonly] {
  background: var(--agate-blush);
  color: var(--agate-plum);
}

.page-dialog__field input[aria-invalid="true"] {
  border-color: var(--agate-berry);
  outline: var(--rule-thin) solid var(--agate-berry);
  outline-offset: -0.35rem;
}

.page-dialog__field p {
  font-size: var(--text-xs);
}

.page-dialog__error {
  padding: var(--space-3);
  border: var(--rule-medium) solid var(--agate-ink);
  background: var(--agate-magenta);
  color: var(--agate-ink) !important;
  font-size: var(--text-sm);
  font-weight: 750;
}

.page-dialog__error[hidden] {
  display: none;
}

.foundation-note {
  display: grid;
  margin-top: var(--space-5);
  padding: var(--space-5);
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: var(--space-3);
  border: var(--rule-medium) solid var(--agate-ink);
  border-left-width: 0.65rem;
  background: var(--agate-rose);
  color: var(--agate-ink);
}

.foundation-note::before {
  content: "01";
  color: var(--agate-ink);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 900;
}

.foundation-note strong {
  color: var(--agate-ink);
}

.javascript-note {
  margin-top: var(--space-5);
  padding: var(--space-5);
  border: var(--rule-medium) solid var(--agate-ink);
  background: var(--agate-red-light);
  color: var(--agate-ink);
}

.ide-followup {
  display: flex;
  margin-top: var(--space-6);
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
}

.ide-followup p {
  margin: 0;
  color: var(--agate-plum);
}

@media (max-width: 58rem) {
  .workspace-tabs {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .workspace-tabs:not([hidden]) {
    display: grid;
  }

  .workspace-grid {
    height: auto;
    min-height: 0;
    grid-template-columns: 1fr;
  }

  .editor-column {
    display: block;
    border-right: 0;
  }

  .editor-column .workspace-panel {
    height: clamp(28rem, 70dvh, 44rem);
    min-height: 28rem;
  }

  .editor-column .workspace-panel + .workspace-panel {
    border-top: 0;
  }

  .preview-panel {
    height: clamp(28rem, 70dvh, 44rem);
    min-height: 28rem;
  }

  .preview-canvas {
    min-height: 0;
  }
}

@media (max-width: 42rem) {
  .ide-intro,
  .ide-followup,
  .workspace-toolbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .workspace-toolbar,
  .conflict-notice {
    align-items: stretch;
  }

  .conflict-notice {
    flex-direction: column;
  }

  .workspace-summary,
  .workspace-actions,
  .page-manager__summary,
  .page-actions {
    width: 100%;
    flex: none;
  }

  .workspace-actions,
  .conflict-actions,
  .dialog-actions,
  .page-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-content: stretch;
  }

  .workspace-actions .ide-action,
  .conflict-actions .ide-action,
  .dialog-actions .ide-action,
  .page-actions .ide-action {
    width: 100%;
  }

  .workspace-actions .ide-action--danger {
    grid-column: 1 / -1;
  }

  .page-manager__header {
    align-items: stretch;
    flex-direction: column;
  }

  .link-health summary {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .link-health summary::before {
    grid-row: 1 / 3;
  }

  #link-health-summary {
    grid-column: 2;
    justify-self: start;
    text-align: left;
  }

  .workspace-panel__header {
    min-height: 4rem;
    align-items: flex-start;
    flex-direction: column;
    justify-content: center;
    padding-block: var(--space-2);
  }

  .workspace-panel__title {
    width: 100%;
  }

  .preview-controls {
    width: 100%;
    flex-wrap: wrap;
    justify-content: space-between;
  }

  .template-dialog__header,
  .template-list {
    grid-template-columns: 1fr;
  }

  .template-dialog__header {
    align-items: start;
  }
}

@media (max-width: 25rem) {
  .workspace-actions,
  .conflict-actions,
  .dialog-actions,
  .page-actions {
    grid-template-columns: 1fr;
  }

  .workspace-actions .ide-action--danger {
    grid-column: auto;
  }
}

@media (forced-colors: active) {
  .workspace-tabs button[aria-selected="true"],
  .page-button[aria-current="page"],
  .preview-controls input:checked,
  .template-card {
    outline: var(--rule-thin) solid CanvasText;
    outline-offset: -0.25rem;
  }

  .workspace-tabs button[aria-selected="true"]:focus-visible,
  .page-button[aria-current="page"]:focus-visible,
  .preview-controls input:checked:focus-visible,
  .template-card:focus-visible,
  .link-health summary:focus-visible {
    outline: var(--rule-heavy) double Highlight;
    outline-offset: -0.5rem;
  }

  .preview-frame:focus-visible {
    outline: var(--rule-heavy) solid CanvasText;
    outline-offset: 0.2rem;
  }
}