:root {
  color-scheme: light;
  --apple-blue: #0066cc;
  --apple-blue-focus: #0071e3;
  --apple-blue-on-dark: #2997ff;
  --apple-ink: #1d1d1f;
  --apple-muted: #7a7a7a;
  --apple-bg: #f5f5f7;
  --apple-surface: #ffffff;
  --apple-surface-raised: #fafafc;
  --apple-border: #e0e0e0;
  --apple-border-soft: rgba(0, 0, 0, 0.08);
  --apple-code-bg: #1d1d1f;
  --apple-code-surface: #272729;
  --apple-success: #168038;
  --apple-warning: #b35f00;
  --apple-danger: #d70015;
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --apple-ink: #f5f5f7;
    --apple-muted: #cccccc;
    --apple-bg: #000000;
    --apple-surface: #1d1d1f;
    --apple-surface-raised: #272729;
    --apple-border: #424245;
    --apple-border-soft: rgba(255, 255, 255, 0.16);
  }
}

* {
  box-sizing: border-box;
}

html {
  background: var(--apple-bg);
}

body {
  min-height: 100vh;
  margin: 0;
  padding: 24px;
  background: var(--apple-bg);
  color: var(--apple-ink);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 17px;
  line-height: 1.47;
  letter-spacing: 0;
}

.container {
  width: min(100%, 980px);
  margin: 0 auto 24px;
  padding: clamp(20px, 4vw, 32px);
  border: 1px solid var(--apple-border-soft);
  border-radius: 18px;
  background: color-mix(in srgb, var(--apple-surface) 92%, transparent);
  box-shadow: none;
  color: var(--apple-ink);
}

h1 {
  margin: 0 0 24px;
  color: var(--apple-ink);
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: 0;
  text-align: center;
}

h2,
h3,
.section-title,
.comparison-title {
  color: var(--apple-ink);
  font-weight: 600;
  letter-spacing: 0;
}

.subtitle,
.notification,
#instructions,
.media-details,
.loading,
.info-label,
.comparison-label {
  color: var(--apple-muted);
}

input,
textarea,
select,
.url-input,
.input-container input,
.sync-tolerance input {
  width: 100%;
  min-height: 44px;
  border: 1px solid var(--apple-border);
  border-radius: 9999px;
  background: var(--apple-surface);
  color: var(--apple-ink);
  padding: 11px 16px;
  font: inherit;
  outline: none;
  box-shadow: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

textarea {
  border-radius: 18px;
  line-height: 1.47;
}

input:focus,
textarea:focus,
select:focus,
.url-input:focus,
.input-container input:focus {
  border-color: color-mix(in srgb, var(--apple-blue-focus) 60%, var(--apple-border));
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--apple-blue-focus) 18%, transparent);
}

button,
.button,
.input-container button,
.video-controls button {
  min-height: 44px;
  border: 0;
  border-radius: 9999px;
  background: var(--apple-blue);
  color: #ffffff;
  padding: 11px 22px;
  font: inherit;
  font-weight: 400;
  cursor: pointer;
  box-shadow: none;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

button:hover,
.button:hover,
.input-container button:hover,
.video-controls button:hover {
  background: var(--apple-blue-focus);
}

button:active,
.button:active,
.input-container button:active,
.video-controls button:active {
  transform: scale(0.97);
}

button:focus-visible,
.button:focus-visible,
.input-container button:focus-visible,
.video-controls button:focus-visible {
  outline: 2px solid var(--apple-blue-focus);
  outline-offset: 2px;
}

button:disabled,
.button:disabled,
.input-container button:disabled,
.video-controls button:disabled {
  background: color-mix(in srgb, var(--apple-muted) 40%, var(--apple-surface));
  color: var(--apple-muted);
  cursor: not-allowed;
  transform: none;
}

.control-actions button:not(:first-child),
.video-controls button:not(:first-child) {
  border: 1px solid var(--apple-blue);
  background: transparent;
  color: var(--apple-blue);
}

.control-actions button:not(:first-child):hover,
.video-controls button:not(:first-child):hover {
  background: color-mix(in srgb, var(--apple-blue) 8%, transparent);
}

.input-container button.active,
.tab.active {
  border-color: var(--apple-blue);
  background: color-mix(in srgb, var(--apple-blue) 10%, var(--apple-surface));
  color: var(--apple-blue);
}

.input-container,
.input-section,
.upload-container,
.image-container,
.details-panel,
.comparison-mode,
.section,
.sensor-data {
  margin-bottom: 24px;
}

.title-row {
  gap: 12px;
  margin-bottom: 24px;
}

.notification {
  width: min(100%, 660px);
  border: 1px solid var(--apple-border);
  border-left: 0;
  border-radius: 18px;
  background: var(--apple-surface-raised);
  padding: 14px 16px;
}

.notification code {
  border: 1px solid var(--apple-border);
  border-radius: 9999px;
  background: var(--apple-surface);
  color: var(--apple-ink);
}

.pathops-health,
.device-type,
.ssim-overlay {
  border: 1px solid var(--apple-border);
  border-radius: 9999px;
  background: var(--apple-surface-raised);
  color: var(--apple-muted);
  box-shadow: none;
}

.pathops-health[data-status="online"] {
  border-color: color-mix(in srgb, var(--apple-success) 28%, var(--apple-border));
  background: color-mix(in srgb, var(--apple-success) 10%, var(--apple-surface));
  color: var(--apple-success);
}

.pathops-health[data-status="offline"] {
  border-color: color-mix(in srgb, var(--apple-danger) 28%, var(--apple-border));
  background: color-mix(in srgb, var(--apple-danger) 10%, var(--apple-surface));
  color: var(--apple-danger);
}

.pathops-health-dot {
  box-shadow: none;
}

.image-info,
.media-item,
.codec-test,
.comparison-mode,
.comparison-item,
.instructions,
.quality-assessment,
.detail-item,
.upload-area,
.drop-zone,
.text-display,
.input-box {
  border: 1px solid var(--apple-border);
  border-radius: 18px;
  background: var(--apple-surface-raised);
  color: var(--apple-ink);
  box-shadow: none;
}

.image-info:hover,
.comparison-item:hover,
.media-item:hover,
.instructions:hover {
  border-color: color-mix(in srgb, var(--apple-blue) 28%, var(--apple-border));
  box-shadow: none;
  transform: none;
}

.image-info h3,
.instructions h2 {
  border-bottom: 1px solid var(--apple-border);
  color: var(--apple-ink);
}

.image-info p,
.instructions ol,
.profile-item,
.codec-summary,
.info-value,
.comparison-value {
  color: var(--apple-muted);
}

.info-row,
.codec-row {
  border-bottom-color: var(--apple-border);
}

.codec-test > div[style*="background: #fffbf0"],
.codec-test > div[style*="background: #e8f4fd"],
.codec-test div[style*="background: #f5f5f5"],
.codec-test div[style*="background: #fff"] {
  border: 1px solid var(--apple-border) !important;
  background: var(--apple-surface) !important;
  color: var(--apple-ink) !important;
}

.codec-test [style*="color: #333"],
.codec-test [style*="color: #444"],
.codec-test [style*="color: #555"],
.codec-test [style*="color: #666"] {
  color: var(--apple-ink) !important;
}

.codec-test [style*="color: #888"] {
  color: var(--apple-muted) !important;
}

.tab-container {
  gap: 4px;
  border-bottom: 1px solid var(--apple-border);
  overflow-x: auto;
}

.tab {
  border-bottom: 2px solid transparent;
  color: var(--apple-muted);
  border-radius: 0;
}

.tab:hover {
  background: transparent;
  color: var(--apple-ink);
}

.supported,
.performance-optimal,
.quality-excellent {
  color: var(--apple-success);
}

.not-supported,
.performance-limited,
.quality-poor {
  color: var(--apple-danger);
}

.partial,
.performance-good,
.quality-fair {
  color: var(--apple-warning);
}

.quality-good {
  color: var(--apple-blue);
}

.warning {
  border: 1px solid color-mix(in srgb, var(--apple-warning) 24%, var(--apple-border));
  border-radius: 12px;
  background: color-mix(in srgb, var(--apple-warning) 10%, var(--apple-surface));
  color: var(--apple-warning);
}

.success {
  border: 1px solid color-mix(in srgb, var(--apple-success) 24%, var(--apple-border));
  border-radius: 12px;
  background: color-mix(in srgb, var(--apple-success) 10%, var(--apple-surface));
  color: var(--apple-success);
}

.error-message,
.image-info.error {
  border: 1px solid color-mix(in srgb, var(--apple-danger) 24%, var(--apple-border));
  background: color-mix(in srgb, var(--apple-danger) 10%, var(--apple-surface));
  color: var(--apple-danger);
}

.error-message .error-detail,
.image-info.error p {
  color: var(--apple-danger);
}

.sync-status {
  border: 1px solid color-mix(in srgb, var(--apple-blue) 28%, var(--apple-border));
  background: color-mix(in srgb, var(--apple-blue) 10%, var(--apple-surface));
  color: var(--apple-blue);
}

.sync-status.warning {
  border-color: color-mix(in srgb, var(--apple-warning) 28%, var(--apple-border));
  background: color-mix(in srgb, var(--apple-warning) 10%, var(--apple-surface));
  color: var(--apple-warning);
}

.sync-status.error {
  border-color: color-mix(in srgb, var(--apple-danger) 28%, var(--apple-border));
  background: color-mix(in srgb, var(--apple-danger) 10%, var(--apple-surface));
  color: var(--apple-danger);
}

img-comparison-slider {
  overflow: hidden;
  border: 1px solid var(--apple-border);
  border-radius: 18px;
  background: var(--apple-surface-raised);
  --divider-width: 3px;
  --divider-color: var(--apple-blue);
  --handle-color: var(--apple-blue);
  --handle-background: var(--apple-blue);
}

img-comparison-slider img,
img-comparison-slider video,
.image-preview,
.preview-image {
  border-radius: 12px;
  background: var(--apple-surface);
  box-shadow: none;
}

.upload-area,
.drop-zone {
  border-style: dashed;
  cursor: pointer;
}

.upload-area:hover,
.upload-area.drag-over,
.drop-zone:hover,
.drop-zone.active {
  border-color: var(--apple-blue);
  background: color-mix(in srgb, var(--apple-blue) 7%, var(--apple-surface));
}

.palette-container {
  gap: 12px;
}

.color-swatch {
  border: 1px solid var(--apple-border-soft);
  border-radius: 18px;
  box-shadow: none;
}

.color-swatch:hover {
  transform: none;
}

.toast {
  border-radius: 9999px;
  background: color-mix(in srgb, var(--apple-code-bg) 88%, transparent);
}

.toast.success {
  background: color-mix(in srgb, var(--apple-success) 88%, transparent);
}

.text-display,
.input-box,
#motionData,
#orientationData,
#gpsData,
#rawUserAgent {
  border-color: color-mix(in srgb, var(--apple-blue-on-dark) 24%, var(--apple-code-surface));
  background: var(--apple-code-bg);
  color: #f5f5f7;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}

.text-display span.correct,
.char.correct {
  color: #32d74b;
}

.text-display span.incorrect,
.char.incorrect {
  color: #ff453a;
  text-decoration-color: currentColor;
}

.char.pending {
  color: #cccccc;
}

.stat-label {
  color: var(--apple-muted);
}

.stat-value {
  color: var(--apple-blue-on-dark);
  font-weight: 600;
}

.book-container {
  margin: 64px auto 40px;
}

.book-side {
  border-color: rgba(255, 255, 255, 0.14);
  color: #ffffff;
}

.front {
  background: #1d1d1f;
}

.back {
  background: #272729;
}

.spine {
  background: var(--apple-blue);
}

.top,
.bottom,
.right {
  background-color: #f5f5f7;
}

@media (max-width: 640px) {
  body {
    padding: 16px;
  }

  .container {
    padding: 20px;
  }

  .image-info-container,
  .url-input-container,
  .stats {
    flex-direction: column;
  }

  .image-info {
    width: 100%;
  }

  .palette-container {
    grid-template-columns: 1fr;
  }

  .book-container {
    width: 240px;
    height: 320px;
    margin-top: 44px;
  }
}