.sacred-space-app { --screen: #17221c; --green: #c7edab; font-family: Tahoma, Verdana, sans-serif; }
.sacred-space-app * { box-sizing: border-box; }
.sacred-space-app .player {
  padding: 4px;
  background: linear-gradient(#e1e5e8, #a6afb7);
  border: 1px solid #12181e;
  border-radius: 5px;
  box-shadow: inset 0 1px #fff, inset 1px 0 #f4f5f6, inset -1px -1px #778089, 0 12px 32px #0005;
}
.sacred-space-app .top-rim { height: 6px; }
.sacred-space-app .video-frame { position: relative; aspect-ratio: 16 / 9; background: #000; border: 1px solid #59616b; outline: 1px solid #edf0f2; }
.sacred-space-app iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.sacred-space-app .toolbar { display: flex; align-items: center; gap: 10px; padding: 7px 8px 4px; }
.sacred-space-app button {
  min-height: 31px;
  padding: 5px 14px;
  border: 1px solid #6e7781;
  border-radius: 3px;
  background: linear-gradient(#fff 0%, #e7ebee 46%, #c6cdd3 49%, #d6dce1 100%);
  color: #242c34;
  box-shadow: inset 0 1px #fff, inset 1px 0 #fff8, 0 1px #f4f6f8;
  text-shadow: 0 1px #fff;
  font: bold .875rem/1.3 Tahoma, Verdana, sans-serif;
  cursor: pointer;
}
.sacred-space-app button:hover:not(:disabled) { background: linear-gradient(#fff, #ebf1f5 46%, #d4dee6 49%, #e1e8ed); border-color: #485b6b; }
.sacred-space-app button:active:not(:disabled) { background: linear-gradient(#b8c1c9, #e5ebef); box-shadow: inset 1px 2px 3px #0003; }
.sacred-space-app button:disabled { opacity: .55; cursor: default; }
.sacred-space-app button:focus-visible, .sacred-space-app a:focus-visible { outline: 3px solid #88baff; outline-offset: 3px; }
.sacred-space-app .primary { min-width: 98px; }
.sacred-space-app .primary::before { content: '▶'; display: inline-block; margin-right: 9px; font-size: .8125rem; color: #294337; }
.sacred-space-app .primary[data-running="true"]::before { content: '■'; }
.sacred-space-app #status {
  display: flex; align-items: center; gap: 9px;
  flex: 1; min-width: 0; min-height: 31px; margin: 0; padding: 4px 12px;
  color: var(--green); background: var(--screen);
  border: 1px solid #64706a; border-radius: 2px;
  box-shadow: inset 1px 2px 4px #0009, 0 1px #f1f4f6;
  font: .875rem/1.4 "Lucida Console", Monaco, monospace;
}
.sacred-space-app .status-window { flex: 1; min-width: 0; overflow: hidden; }
.sacred-space-app .status-track { display: block; }
.sacred-space-app .status-repeat { display: none; }
.sacred-space-app #status[data-scrolling="true"] .status-track {
  display: flex; width: max-content; min-width: 200%; white-space: nowrap;
  animation: sacred-title-scroll 32s linear infinite;
}
.sacred-space-app #status[data-scrolling="true"] .status-track > span { display: block; flex: 1 0 auto; padding-right: 64px; }
@keyframes sacred-title-scroll { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
.sacred-space-app #status[data-scrolling="true"] .status-track { animation: none; width: auto; min-width: 0; white-space: normal; }
.sacred-space-app #status[data-scrolling="true"] .status-track > span { padding-right: 0; }
.sacred-space-app #status[data-scrolling="true"] .status-repeat { display: none; }
}
.sacred-space-app .view-controls { display: flex; gap: 6px; }
.sacred-space-app .player-notice { display: flex; align-items: baseline; gap: 24px; justify-content: space-between; padding: 16px 4px 0; color: #c3cbd3; font-size: .875rem; line-height: 1.5; }
.sacred-space-app .player-notice p { margin: 0; }
.sacred-space-app .player:fullscreen { display: flex; flex-direction: column; background: #000; border: 0; border-radius: 0; padding: 0; }
.sacred-space-app .player:fullscreen .top-rim { display: none; }
.sacred-space-app .player:fullscreen .video-frame { flex: 1; aspect-ratio: auto; border: 0; outline: 0; }
.sacred-space-app .player:fullscreen .toolbar { flex-shrink: 0; padding: 6px 12px; background: linear-gradient(#e1e5e8, #a6afb7); }
@container sacred-player (max-width: 600px) {
.sacred-space-app .toolbar { flex-wrap: wrap; gap: 6px; padding: 7px 6px 4px; }
.sacred-space-app #status { font-size: .8125rem; padding-inline: 8px; }
.sacred-space-app .view-controls { width: 100%; }
.sacred-space-app .view-controls button { flex: 1; }
.sacred-space-app .player-notice { flex-direction: column; gap: 10px; }
}

.sacred-space-app .player-notice { color: #62496a; }
.sacred-space-app .player-notice:has(#notice:empty) { display: none; }