.atlas-clarus-appearance-simulator {
  --acaps-border: color-mix(in srgb, currentColor 22%, transparent);
  --acaps-muted: color-mix(in srgb, currentColor 7%, transparent);
  --acaps-panel: color-mix(in srgb, currentColor 4%, transparent);
  max-width: 1100px;
  margin: 1.5rem auto;
  color: inherit;
}
.atlas-clarus-aps__header,
.atlas-clarus-aps__identity,
.atlas-clarus-aps__status,
.atlas-clarus-aps__actions {
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
}
.atlas-clarus-aps__header { justify-content: space-between; margin-bottom: 1rem; }
.atlas-clarus-aps__header h2 { margin: 0 0 .2rem; }
.atlas-clarus-aps__header p,
.atlas-clarus-aps__boundary { margin: 0; opacity: .78; }
.atlas-clarus-aps__identity code,
.atlas-clarus-aps__identity strong { display: block; }
.atlas-clarus-aps__swatch {
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  background: var(--atlas-clarus-reference);
  border: 1px solid var(--acaps-border);
}
.atlas-clarus-aps__layout {
  display: grid;
  grid-template-columns: minmax(240px, .75fr) minmax(0, 1.65fr);
  gap: 1rem;
  align-items: start;
}
.atlas-clarus-aps__controls {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .8rem;
}
.atlas-clarus-aps__controls label { display: grid; gap: .25rem; font-weight: 600; }
.atlas-clarus-aps__controls select,
.atlas-clarus-aps__controls input[type="search"],
.atlas-clarus-aps__controls input[type="range"] { width: 100%; }
.atlas-clarus-aps__controls select,
.atlas-clarus-aps__controls input[type="search"],
.atlas-clarus-aps__actions button {
  min-height: 2.6rem;
  border: 1px solid var(--acaps-border);
  border-radius: .35rem;
  background: transparent;
  color: inherit;
  padding: .45rem .6rem;
}
.atlas-clarus-aps__controls input[type="search"] { margin-bottom: .35rem; }
.atlas-clarus-aps__controls select[size] { min-height: 8.5rem; }
.atlas-clarus-aps__actions button { cursor: pointer; }
.atlas-clarus-aps__actions button:hover { background: var(--acaps-muted); }
.atlas-clarus-aps__actions button:disabled { cursor: wait; opacity: .5; }
.atlas-clarus-aps__controls .atlas-clarus-aps__wide { grid-column: 1 / -1; }
.atlas-clarus-aps__controls .atlas-clarus-aps__check { display: flex; align-items: center; font-weight: 400; }
.atlas-clarus-aps__status { justify-content: space-between; margin-bottom: .7rem; }
.atlas-clarus-aps__canvas-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--acaps-muted);
  border: 1px solid var(--acaps-border);
}
.atlas-clarus-aps__canvas-wrap canvas {
  display: block;
  width: 100%;
  height: 100%;
  cursor: crosshair;
  image-rendering: pixelated;
}
.atlas-clarus-aps__canvas-wrap > span {
  position: absolute;
  top: .6rem;
  left: .6rem;
  padding: .2rem .45rem;
  border-radius: .25rem;
  background: Canvas;
  color: CanvasText;
  pointer-events: none;
}
.atlas-clarus-aps__readout {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .6rem;
  margin-top: .7rem;
}
.atlas-clarus-aps__readout > div {
  min-width: 0;
  padding: .65rem;
  background: var(--acaps-panel);
  border: 1px solid var(--acaps-border);
  border-radius: .35rem;
}
.atlas-clarus-aps__readout span,
.atlas-clarus-aps__readout code { display: block; overflow-wrap: anywhere; }
.atlas-clarus-aps__readout span { opacity: .72; margin-bottom: .15rem; }
.atlas-clarus-aps__actions { margin: .8rem 0; }
.atlas-clarus-aps__boundary { border-left: 3px solid currentColor; padding-left: .75rem; }
.atlas-clarus-aps__bridge { margin: 1rem 0; padding: .8rem; border: 1px solid var(--acaps-border); border-radius: .45rem; background: var(--acaps-panel); }
.atlas-clarus-aps__bridge summary { cursor: pointer; display: flex; justify-content: space-between; gap: 1rem; }
.atlas-clarus-aps__bridge-grid,
.atlas-clarus-aps__bridge-status { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; }
.atlas-clarus-aps__bridge-grid label { display: grid; gap: .25rem; font-weight: 600; }
.atlas-clarus-aps__bridge-grid input,
.atlas-clarus-aps__bridge-grid select { width: 100%; min-height: 2.6rem; border: 1px solid var(--acaps-border); border-radius: .35rem; background: transparent; color: inherit; padding: .4rem; }
.atlas-clarus-aps__bridge-status > div { padding: .55rem; border: 1px solid var(--acaps-border); border-radius: .35rem; }
.atlas-clarus-aps__bridge-status span,
.atlas-clarus-aps__bridge-status strong { display: block; overflow-wrap: anywhere; }
.atlas-clarus-aps__bridge-status span { opacity: .7; }
.atlas-clarus-aps__bridge-report { margin-bottom: 0; }
.atlas-clarus-aps__bridge--valid { border-left: 4px solid #16803c; }
.atlas-clarus-aps__bridge--invalid { border-left: 4px solid #b42318; }
.atlas-clarus-aps__renderer-preview { margin-top: .75rem; border: 1px solid var(--acaps-border); border-radius: .35rem; overflow: hidden; }
.atlas-clarus-aps__renderer-preview img { display: block; width: 100%; height: auto; background: #101820; }
.atlas-clarus-aps__renderer-preview code { display: block; padding: .55rem; overflow-wrap: anywhere; }
.atlas-clarus-aps__objects { margin: 1rem 0; padding: .8rem; border: 1px solid var(--acaps-border); border-radius: .45rem; background: var(--acaps-panel); }
.atlas-clarus-aps__objects summary { cursor: pointer; display: flex; justify-content: space-between; gap: 1rem; }
.atlas-clarus-aps__object-grid { display: grid; grid-template-columns: minmax(180px, .55fr) minmax(0, 1.45fr); gap: .8rem; margin-top: .8rem; }
.atlas-clarus-aps__object-controls { display: grid; align-content: start; gap: .7rem; }
.atlas-clarus-aps__object-controls label { display: grid; gap: .25rem; font-weight: 600; }
.atlas-clarus-aps__object-controls select,
.atlas-clarus-aps__object-controls button { min-height: 2.6rem; width: 100%; border: 1px solid var(--acaps-border); border-radius: .35rem; background: transparent; color: inherit; padding: .45rem .6rem; }
.atlas-clarus-aps__object-controls button { cursor: pointer; }
.atlas-clarus-aps__object-stage { position: relative; min-width: 0; aspect-ratio: 3 / 2; background: radial-gradient(circle at 50% 35%, color-mix(in srgb, currentColor 12%, transparent), transparent 65%); border: 1px solid var(--acaps-border); overflow: hidden; }
.atlas-clarus-aps__object-stage canvas { display: block; width: 100%; height: 100%; cursor: grab; touch-action: none; }
.atlas-clarus-aps__object-stage canvas:active { cursor: grabbing; }
.atlas-clarus-aps__object-stage code { position: absolute; left: .5rem; right: .5rem; bottom: .5rem; padding: .3rem .45rem; background: Canvas; color: CanvasText; opacity: .86; overflow-wrap: anywhere; }
.atlas-clarus-aps--error { border-color: #b42318; }
.atlas-clarus-aps--error .atlas-clarus-aps__status { color: #b42318; }
@media (max-width: 760px) {
  .atlas-clarus-aps__layout { grid-template-columns: 1fr; }
  .atlas-clarus-aps__object-grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .atlas-clarus-aps__controls,
  .atlas-clarus-aps__readout,
  .atlas-clarus-aps__bridge-grid,
  .atlas-clarus-aps__bridge-status { grid-template-columns: 1fr; }
  .atlas-clarus-aps__controls .atlas-clarus-aps__wide { grid-column: auto; }
}