:root {color-scheme: light;}
body {
  margin: 0;
  padding: 40px;
  min-height: 100vh;
  box-sizing: border-box;
  font-family: Arial, sans-serif;
  background: white;
  color: black;
}
main {display: flex; flex-direction: column; align-items: center;}
.title {font-size: 24px; font-weight: bold; margin: 0 0 10px; text-align: center;}
.description {font-size: 14px; color: #666; margin: 0 0 20px; text-align: center;}
.actions {display: flex; gap: 10px; justify-content: center; flex-wrap: wrap;}
button {font-family: inherit;}
.open-button, .clear-button, .cubemap-button {
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  color: white;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.2s;
}
.open-button, .cubemap-button {background-color: #007bff;}
.open-button:hover, .cubemap-button:hover {background-color: #0056b3;}
.clear-button {background-color: #dc3545;}
.clear-button:hover {background-color: #c82333;}
button:disabled {background-color: #6c757d; cursor: not-allowed;}
.cubemap-button.active {background-color: #28a745;}
#status {font-size: 14px; color: #666; margin: 10px 0 15px; max-width: 600px; overflow-wrap: anywhere; text-align: center;}
#status.error {color: #b42318;}
.viewer-container {
  border: 2px solid #ccc;
  background-color: #f5f5f5;
  min-width: 33vw;
  min-height: 33vh;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 0.2s, border-color 0.2s;
  position: relative;
}
.viewer-container:hover {background-color: #eee; border-color: #888;}
#placeholder {display: flex; flex-direction: column; align-items: center; justify-content: center;}
.drop-icon {margin-bottom: 15px; transform: scale(0.5);}
.drop-icon svg {width: 64px; height: 64px; fill: #999; transition: fill 0.2s;}
.viewer-container:hover .drop-icon svg {fill: #666;}
.drop-text {font-size: 16px; color: #666; text-align: center; margin: 0 0 10px;}
canvas {display: block; max-width: 100%; max-height: 70vh; width: auto; height: auto; object-fit: contain; image-rendering: pixelated;}
[hidden] {display: none !important;}
#controls {max-width: 100%;}
.cubemap-controls {margin-top: 20px; text-align: center;}
.cubemap-controls h2 {font-size: 16px; font-weight: bold; margin: 0 0 10px;}
.cubemap-buttons {display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 10px;}
.controls {display: flex; gap: 15px; flex-wrap: wrap; align-items: center; justify-content: center; margin-top: 20px; max-width: 800px;}
label {display: flex; align-items: center; gap: 8px; font-size: 14px; color: #666;}
select {font: inherit; padding: 8px; border: 1px solid #ccc; border-radius: 4px; background: white; color: #333;}
input[type="range"], input[type="checkbox"] {accent-color: #007bff;}
output {min-width: 4em;}
#metadata {margin-top: 20px; max-width: 600px; width: 100%; font-size: 14px; color: #666;}
dl {display: grid; grid-template-columns: max-content 1fr; gap: 8px 20px;}
dt {font-weight: bold;} dd {margin: 0; overflow-wrap: anywhere;}
.format-info {margin-top: 30px; max-width: 600px; text-align: left;}
.format-info h2 {font-size: 18px; margin: 18px 0 10px; color: #333;}
.format-info p {font-size: 14px; line-height: 1.5; color: #666; margin: 0 0 15px;}
.format-info li {line-height: 1.5; margin-bottom: 8px;}
.format-info .support {background-color: #f8f9fa; padding: 15px; border-radius: 5px; border-left: 4px solid #007bff; margin-bottom: 20px;}
footer {margin-top: 20px; font-size: 14px;}
a {color: #007bff;}
@media (max-width: 500px) {
  body {padding: 20px;}
  .viewer-container {width: 100%;}
  dl {grid-template-columns: 1fr;}
  dd {margin-bottom: 8px;}
}