graphics-panel {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 9;
}

graphics-panel [hidden] {
  display: none !important;
}

graphics-panel input,
graphics-panel select {
  padding: 4px 6px;
  padding-right: 4px;
  border: 1px solid color-mix(in srgb, var(--text), transparent 70%);
  border-radius: 4px;
  background: none;
  margin: 0;
  color: var(--text);
  font-size: 13px;
}

graphics-panel [btn],
graphics-panel button {
  padding: 0.33rem;
  border-radius: 0.33rem;
  font-size: 13px;
  color: var(--text);
  border: 1px solid currentColor;
  font-weight: 500;
  cursor: pointer;
  width: fit-content;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.33rem;
  background: transparent;
  transition: all ease 300ms;
}

graphics-panel [btn][disabled],
graphics-panel button:disabled {
  background: none;
  opacity: .33;
  cursor: default;
}

graphics-panel [btn]:not([disabled]):hover,
graphics-panel button:not(:disabled):hover {
  background: rgba(255, 255,255,.08);
}

graphics-panel [menu] {
  position: fixed;
  top: 0;
  right: 0;
  padding: 0.33rem;
  color: var(--text);
  font-family: monospace;
  font-weight: 100;
  font-size: 13px;
  height: 2rem;
  border: 1px solid color-mix(in srgb, var(--text), transparent 100%);
  border-radius: 1px;
  background: var(--background);
  background: color-mix(in srgb, var(--background), transparent 5%);
}

graphics-panel [menu]:hover {
  background: color-mix(in srgb, var(--background), var(--text) 10%);
}

graphics-panel:has([panel][open]) [menu] {
  border: 1px solid color-mix(in srgb, var(--text), transparent 80%);
  border-bottom: none;
}

graphics-panel [panel] {
  padding: 0.22rem;
  position: fixed;
  right: 0rem;
  top: 2rem;
  margin-top: -1px;
  z-index: -1;
  min-width: 200px;
  max-width: 420px;
  height: calc(100% - 2rem);
  border-top-left-radius: 1rem;
  border: 1px solid color-mix(in srgb, var(--text), transparent 80%);
  border-bottom: 0;
  border-right: 0;
  background: var(--background);
  background: color-mix(in srgb, var(--background), transparent 12%);

  display: flex;
  flex-direction: column;
  gap: 0.44rem;

  max-height: calc(100% - 2rem);
  overflow-x: hidden;

  scrollbar-width: 0;
}

graphics-panel [panel]:not([open]) {
  display: none;
}

graphics-panel[panel]::-webkit-scrollbar {
  display: none;
}

graphics-panel [panel] > div {
  position: relative;
  padding: 0.33rem;
}

graphics-panel [panel] > div[title] {
  border: 1px solid currentColor;
  border-radius: 0.33rem;

  border-radius: 0.33rem;
  border-top: 0;
  /* border-radius: 0; */
  border-top-left-radius: 0;
  border-top-right-radius: 0%;

  margin-top: 32px;
  margin-top: 24px;
}

graphics-panel [panel] > div[title]:not(:has(*)) {
  padding: 0rem;
}

graphics-panel [panel] > div[title]::before {
  box-sizing: border-box;
  position: relative;
  font-size: 13px;
  font-weight: 600;
  content: attr(title);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  white-space: nowrap;
  padding: 0.33rem;
  padding-bottom: 0.11rem;

  position: absolute;
  border: 1px solid currentColor;

  border-bottom: 0;
  border-radius: 0.33rem;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0%;

  width: calc(100% + 2px);
  bottom: 100%;
  left: -1px;
}

graphics-panel [playstate] {
  display: flex;
  flex-direction: column;
  gap: 0.33rem;
}

graphics-panel [playstate] [controls] {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.66rem;
}

graphics-panel [playstate] [controls] button {
  padding: 3px;
  border-radius: 4px;
  background: none;
  color: var(--text);
  border: none;
}

graphics-panel [playstate][status='running'] button[play],
graphics-panel [playstate][status='suspended'] button[pause],
graphics-panel [playstate] [controls] button:hover {
  opacity: 0.5;
}

graphics-panel [playstate] [controls] button:active {
  opacity: 0.3;
}

graphics-panel [playstate] [controls] button svg {
  width: 1rem;
  height: 1rem;
}

graphics-panel [upload] {
  padding: 0 !important;
}

graphics-panel [upload] label {
  padding: 0.33rem;
  border-radius: 0.33rem;
  font-size: 13px;
  border: 1px solid currentColor;
  font-weight: 500;
  cursor: pointer;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.33rem;
  background: transparent;
  transition: all ease 300ms;
}

graphics-panel [upload] label:focus-visible,
graphics-panel [upload] label:hover {
  background: color-mix(in srgb, currentColor, transparent 93%);
}

graphics-panel [upload] label:active {
  filter: brightness(0.93);
}

/* graphics-panel [stats], */
graphics-panel [stats] > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-grow: 1;
  padding: 2px;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
}

graphics-panel [stats] span {
  min-width: 95px;
}

graphics-panel [stats] [fps]::before,
graphics-panel [stats] [time]::before,
graphics-panel [stats] [frame]::before,
graphics-panel [stats] [cpu]::before,
graphics-panel [stats] [gpu]::before,
graphics-panel [stats] [mem]::before {
  content: attr(label);
}

graphics-panel [outline] {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
}

graphics-panel [outline] [node] {
  position: relative;
  padding: 0.44rem 0.66rem;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.33rem;
  border-left: 2px solid currentColor;
  /* border-radius: .33rem; */
  cursor: pointer;
  transition: all ease 300ms;
  background: transparent;
  width: 100%;
  user-select: none;
}

graphics-panel [outline] [node]::before {
  content: attr(node);
  position: relative;
  display: block;
  font-size: 11px;
  opacity: 0.6;
}

graphics-panel [outline] [node]:hover,
graphics-panel [outline] [node]:focus-visible {
  background: color-mix(in srgb, var(--text), transparent 95%);
}

graphics-panel [outline] [node]:active {
  filter: brightness(1.1);
}

graphics-panel [outline] [node][active]{
  background: color-mix(in srgb, var(--text), transparent 93%);
  filter: brightness(1.1);
}

graphics-panel [details] {
  max-height: 320px;
  resize: vertical;
  position: relative;
}

graphics-panel [details][node='-1'],
graphics-panel [details]:not([node]),
graphics-panel [details]:not(:has(*)) {
  display: none;
}

graphics-panel [details] [close] {
  position: absolute;
  right: 0.66rem;
  top: -0.88rem;
  border-radius: 100vmax;
  color: var(--text);
}

graphics-panel [details] [close] svg {
  rotate: 45deg;
}

graphics-panel [details] [container] {
  overflow: scroll;
  height: 100%;
}

graphics-panel [details] [transform] {
  font-size: 13px;
  display: flex;
  flex-direction: column;
  gap: 0.33rem;
  margin-bottom: 0.33rem;
}

graphics-panel [details] [transform] > div {
  display: flex;
  align-items: center;
  padding: 0.33rem 0.11rem;
  gap: 0.33rem;
}

graphics-panel [details] [transform] [label] {
  min-width: 80px;
}

graphics-panel [details] [transform] [label] > span {
  /* background: #000; */
  /* border: 1px solid color-mix(in srgb, var(--text), transparent 70%); */
  padding: 4px 0px;
  border-radius: 4px;
  width: fit-content;
}

graphics-panel [details] [transform] [inputs] {
  display: flex;
  align-items: center;
  gap: 0.33rem;
}

graphics-panel [details] [transform] [inputs] > span {
  position: relative;
  display: flex;
  align-items: center;
  font-size: 13px;
}

graphics-panel [details] [transform] [inputs] input {
  padding: 4px 10px;
  padding-right: 4px;
  border: 1px solid color-mix(in srgb, var(--text), transparent 70%);
  border-radius: 4px;
  background: none;
  margin: 0;
  width: 42px;
  width: 84px;
  color: var(--text);
  font-size: 13px;
}

graphics-panel [details] [transform] [inputs] input:focus,
graphics-panel [details] [transform] [inputs] input:focus-visible,
graphics-panel [details] [transform] [inputs] input:active {
  outline: none;
  border: 1px solid color-mix(in srgb, var(--text), transparent 30%);
}

graphics-panel [details] [transform] [inputs] span:has([name='x'])::after,
graphics-panel [details] [transform] [inputs] span:has([name='y'])::after,
graphics-panel [details] [transform] [inputs] span:has([name='z'])::after {
  content: '';
  position: absolute;
  width: 3px;
  height: 80%;
  background: var(--text);
  border-radius: 4px 0 0 4px;
  left: 2px;
}

graphics-panel [details] [transform] [inputs] span:has([name='x'])::after {
  background: #bc371c;
}

graphics-panel [details] [transform] [inputs] span:has([name='y'])::after {
  background: #77a631;
}

graphics-panel [details] [transform] [inputs] span:has([name='z'])::after {
  background: #4080e6;
}

graphics-panel [details] [animation] {
  margin-bottom: 0.33rem;
  display: flex;
  align-items: center;
  gap: 0.33rem;
}

graphics-panel [details] [animation] span {
  font-size: 13px;
}

graphics-panel [details] [mesh] [btn] {
  width: 100%;
}

graphics-panel [shading] {
  display: flex;
  flex-direction: column;
  gap: 0.33rem;
}

graphics-panel [shading] > div {
  display: flex;
  align-items: center;
  gap: 0.33rem;
}

graphics-panel [shading] button {
  flex-grow: 1;
}

graphics-panel [shading][mode='lit'] [mode='lit'],
graphics-panel [shading][mode='vertex'] [mode='vertex'],
graphics-panel [shading][mode='unlit'] [mode='unlit'] {
  background: var(--text);
  color: var(--background);
}

graphics-panel [retro] {
  display: flex;
  flex-direction: column;
  gap: 0.33rem;
  /* max-width: 260px; */
  font-size: 12px;
}

graphics-panel [retro] [presets] {
  display: flex;
  gap: 0.33rem;
}

graphics-panel [retro] [presets] button {
  flex-grow: 1;
  font-size: 11px;
}

graphics-panel [retro] [row] {
  display: flex;
  align-items: center;
  gap: 0.33rem;
}

graphics-panel [retro] [row] > span {
  flex: 0 0 auto;
  min-width: 76px;
}

graphics-panel [retro] [row] input[type='range'],
graphics-panel [retro] [row] input[type='number'] {
  flex: 1 1 0;
  min-width: 0;
}

graphics-panel [retro] [row] input[type='range'] {
  padding: 0;
  border: none;
}

graphics-panel [retro] input[type='color'] {
  padding: 0;
  width: 28px;
  height: 22px;
  flex: 0 0 auto;
  cursor: pointer;
}

graphics-panel [retro] input[type='checkbox'] {
  flex: 0 0 auto;
}

graphics-panel [retro] [hint] {
  margin: 0;
  font-size: 10px;
  opacity: 0.45;
}

graphics-panel [retro][clean] [hint] {
  opacity: 0.3;
}

graphics-panel [shading] [hint] {
  margin: 0;
  font-size: 10px;
  opacity: 0.45;
}

graphics-panel [lighting] {
  display: flex;
  flex-direction: column;
  gap: 0.44rem;
  /* max-width: 260px; */
  font-size: 12px;
}

graphics-panel [lighting] [global] {
  display: flex;
  flex-direction: column;
  gap: 0.22rem;
}

graphics-panel [lighting] label {
  display: flex;
  align-items: center;
  gap: 0.33rem;
}

graphics-panel [lighting] label > span {
  flex: 0 0 auto;
  min-width: 58px;
}

/* Range inputs carry a UA intrinsic width that overflows the panel unless
   they are told they may shrink. */
graphics-panel [lighting] input[type='range'] {
  flex: 1 1 0;
  min-width: 0;
  padding: 0;
  border: none;
}

graphics-panel [lighting] [rig] {
  display: flex;
  flex-direction: column;
  gap: 0.33rem;
  max-height: 260px;
  overflow-y: auto;
  scrollbar-width: thin;
}

graphics-panel [lighting] [light] {
  display: flex;
  flex-direction: column;
  gap: 0.22rem;
  padding: 0.33rem;
  border-left: 2px solid currentColor;
  background: color-mix(in srgb, var(--text), transparent 96%);
}

graphics-panel [lighting] [light] [row] {
  display: flex;
  align-items: center;
  gap: 0.33rem;
}

graphics-panel [lighting] [light] b {
  flex-grow: 1;
  font-size: 12px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

graphics-panel [lighting] [light] [row] input[type='range'] {
  flex: 1 1 0;
  min-width: 0;
  padding: 0;
  border: none;
}

graphics-panel [lighting] [light] [row] input[type='number'] {
  flex: 1 1 0;
  min-width: 0;
  width: 100%;
}

graphics-panel [lighting] input[type='color'] {
  padding: 0;
  width: 28px;
  height: 22px;
  flex: 0 0 auto;
  cursor: pointer;
}

graphics-panel [lighting] [light] button[remove] {
  padding: 0 6px;
  border: none;
  opacity: 0.6;
}

graphics-panel [lighting] [light] button[remove]:hover {
  opacity: 1;
}

graphics-panel [lighting] [light][kind='directional'] [name='range'] {
  opacity: 0.25;
}

graphics-panel [lighting] [actions] {
  display: flex;
  gap: 0.33rem;
}

graphics-panel [lighting] [actions] button {
  flex-grow: 1;
  font-size: 11px;
}

graphics-panel [textures] {
  display: flex;
  flex-direction: column;
  gap: 0.44rem;
  /* max-width: 260px; */
}

graphics-panel [textures] [controls] {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.33rem;
}

graphics-panel [textures] [controls] select {
  flex-grow: 1;
  min-width: 0;
}

graphics-panel [textures] [upload] {
  padding: 0.33rem;
  border-radius: 0.33rem;
  font-size: 13px;
  border: 1px solid currentColor;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.33rem;
  transition: all ease 300ms;
}

graphics-panel [textures] [upload]:hover {
  background: rgba(255, 255, 255, 0.08);
}

graphics-panel [textures] [swatches] {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.33rem;
  max-height: 200px;
  overflow-y: auto;
  scrollbar-width: thin;
}

graphics-panel [textures] [swatch] {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border: 1px solid transparent;
  border-radius: 0.33rem;
  cursor: grab;
  user-select: none;
  transition: all ease 200ms;
}

graphics-panel [textures] [swatch]:hover {
  background: color-mix(in srgb, var(--text), transparent 92%);
}

graphics-panel [textures] [swatch][active] {
  border-color: currentColor;
  background: color-mix(in srgb, var(--text), transparent 88%);
}

graphics-panel [textures] [swatch] [thumb] {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 3px;
  background-color: color-mix(in srgb, var(--text), transparent 85%);
  background-size: cover;
  background-position: center;
  image-rendering: pixelated;
}

graphics-panel [textures] [swatch] span {
  font-size: 9px;
  line-height: 1.1;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  opacity: 0.7;
}

graphics-panel [textures] [actions] button {
  width: 100%;
}

graphics-panel [textures] [hint] {
  margin: 0;
  font-size: 10px;
  opacity: 0.45;
}

graphics-panel [textures][working] [swatches]::before {
  content: 'loading…';
  font-size: 11px;
  opacity: 0.5;
}

graphics-panel [details] [texture] {
  margin-bottom: 0.33rem;
  display: flex;
  align-items: center;
  gap: 0.33rem;
}

graphics-panel [details] [texture] span {
  font-size: 13px;
}

graphics-panel [details] [texture] select {
  flex-grow: 1;
  min-width: 0;
}

graphics-panel [camera] {
  display: flex;
  flex-direction: column;
  gap: 0.33rem;
  font-size: 13px;
  gap: 0.33rem;
}

graphics-panel [camera] span,
graphics-panel [camera] label {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.33rem;
}

graphics-panel [camera] [near] input,
graphics-panel [camera] [far] input {
  width: 84px;
}

graphics-panel [level] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

graphics-panel [level] > div {
  display: flex;
  align-items: center;
  gap: 10px;
}

graphics-panel [modes] {
  display: flex;
  flex-direction: column;
  gap: 0.33rem;
}

graphics-panel [modes] > div {
  display: flex;
  align-items: center;
  gap: 0.33rem;
}

graphics-panel [modes][sub-mode='scale'] [mode='scale'],
graphics-panel [modes][sub-mode='rotate'] [mode='rotate'],
graphics-panel [modes][sub-mode='translate'] [mode='translate'],
graphics-panel [modes][mode='view'] [mode='view'],
graphics-panel [modes][mode='transform'] [mode='transform'] {
  background: var(--text);
  color: var(--background);
}