:root {
  color-scheme: dark;
  font-family: "Segoe UI", system-ui, sans-serif;
  background: #100e0d;
  color: #eee4d5;
  font-synthesis: none;
}
* { box-sizing: border-box; }
body { margin: 0; overflow: hidden; }
#turntable {
  position: absolute; left: 40%; top: 0; display: block;
  width: 60vw; height: 100dvh; touch-action: none;
}
button, a { font: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled { cursor: default; opacity: 0.55; }
[hidden] { display: none !important; }
.ui-column {
  position: absolute; top: 20px; bottom: 20px; left: 20px;
  width: calc(40vw - 30px); overflow-y: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column; gap: 14px; padding-right: 5px;
  scrollbar-width: thin; scrollbar-color: #aa875966 #171411;
}
.ui-panel {
  flex: none; padding: 16px; border: 1px solid #aa87594d; border-radius: 14px;
  background: #171411ef; box-shadow: 0 8px 30px #0004; backdrop-filter: blur(12px);
}
.eyebrow { color: #c3a77f; font-size: 10px; letter-spacing: 0.15em; }
#album-preview {
  display: block; width: 100%; aspect-ratio: 1; height: auto; margin: 12px 0;
  border-radius: 8px; background: #080809; cursor: zoom-in;
}
#record-viewer {
  position: fixed; inset: 0; width: 100vw; height: 100dvh; max-width: none;
  max-height: none; margin: 0; padding: 0; border: 0; background: #080809;
  color: #eee4d5; overflow: hidden;
}
#record-viewer::backdrop { background: #080809; }
.record-viewer-surface { position: absolute; inset: 0; overflow: hidden; touch-action: none; cursor: grab; }
.record-viewer-surface:active { cursor: grabbing; }
.record-viewer-surface canvas { position: absolute; left: 0; top: 0; transform-origin: 0 0; pointer-events: none; }
.record-viewer-close {
  position: absolute; top: max(16px, env(safe-area-inset-top));
  right: max(16px, env(safe-area-inset-right)); padding: 12px 20px;
  border: 1px solid #aa875966; border-radius: 24px; background: #292018;
}
#record-viewer-help {
  position: absolute; left: 12px; bottom: max(12px, env(safe-area-inset-bottom));
  margin: 0; padding: 8px 12px; background: #080809cc; border-radius: 8px;
  font-size: 11px; line-height: 1.6; pointer-events: none;
}
.file-button {
  display: block; width: 100%; padding: 12px; border: 1px solid #aa875966;
  border-radius: 9px; background: #292018; text-align: left; font-size: 14px;
}
.file-button span { display: block; overflow-wrap: anywhere; }
.file-button small { display: block; margin-top: 6px; color: #c8b9a7; font-size: 11px; line-height: 1.5; }
.file-button:hover:enabled, .mastering-buttons button:hover:enabled { background: #3a2c22; }
.transport { text-align: center; margin-top: 14px; }
#transport {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-width: 130px; padding: 12px 24px; border-radius: 30px;
  border: 1px solid #e4c79780; background: #191512e8; font-size: 14px;
}
#transport:hover:enabled { background: #3a2b20; }
.transport-icon { width: 14px; height: 16px; display: inline-block; flex: 0 0 14px; }
#transport[aria-busy="true"] .transport-icon {
  height: 14px; border: 1.5px solid #dbc29940; border-top-color: #e4c797;
  border-radius: 50%; animation: spin 0.85s linear infinite;
}
#transport[aria-busy="false"] .transport-icon {
  background: #e4c797; clip-path: polygon(15% 0, 100% 50%, 15% 100%);
}
#transport[aria-pressed="true"] .transport-icon {
  clip-path: polygon(0 0, 35% 0, 35% 100%, 0 100%, 0 0, 65% 0, 100% 0, 100% 100%, 65% 100%, 65% 0);
}
.timeline { display: flex; align-items: center; gap: 10px; margin-top: 16px; }
#seek { width: 100%; min-width: 0; height: 3px; margin: 0; accent-color: #c8a878; cursor: pointer; }
#seek:disabled { opacity: 0.35; cursor: default; }
#time { white-space: nowrap; font-size: 10px; color: #d3c3b0; font-variant-numeric: tabular-nums; }
#status { color: #b7a792; font-size: 11px; line-height: 1.5; margin: 12px 0 0; overflow-wrap: anywhere; }
.error { color: #ffb1a3 !important; }
h2 { font: normal 20px/1.3 Georgia, serif; margin: 0 0 12px; }
.mastering-buttons { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.mastering-buttons button {
  border: 1px solid #aa87594d; border-radius: 20px; background: #211b16;
  padding: 9px 16px; font-size: 12px;
}
#master-progress-label { display: block; margin: 12px 0 5px; font-size: 11px; color: #d3c3b0; }
#master-progress { display: block; width: 100%; height: 8px; accent-color: #c8a878; }
.explanation p { color: #c8b9a7; font-size: 13px; line-height: 1.7; }
.panel-note { color: #a99a88; font-size: 11px; line-height: 1.6; margin-bottom: 0; }
.home-link {
  position: absolute; top: 20px; right: 20px; padding: 12px 18px;
  border: 1px solid #aa87594d; border-radius: 24px; background: #171411ed;
  text-decoration: none; font-size: 12px;
}
.home-link:hover { background: #3a2c22; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
:focus-visible { outline: 2px solid #e8c58d; outline-offset: 3px; }
noscript { position: absolute; top: 0; padding: 20px; background: #5c2419; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (max-width: 720px) {
  .home-link { top: 12px; right: 12px; font-size: 11px; padding: 9px 12px; }
  .ui-column { top: 62px; bottom: 12px; left: 8px; width: calc(40vw - 12px); }
  .ui-panel { padding: 8px; }
  .file-button { padding: 8px; font-size: 12px; }
  #transport { min-width: 0; padding: 10px; }
  .timeline { flex-wrap: wrap; }
  .mastering-buttons button { padding: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  #transport[aria-busy="true"] .transport-icon { animation: none; }
}