/* Shared Safari-style window around desktop demos; content coordinates stay intact. */
.demo-browser {
  container: browser-frame / inline-size;
  position: relative;
  width: 100%;
  min-width: 0;
  overflow: hidden;
  border: 1px solid #b9ccbc;
  border-radius: 11px;
  background: #f4f7f2;
  box-shadow: 0 1px 2px #173c2414, 0 8px 14px -9px #173c2454,
    0 28px 42px -24px #22493066;
  pointer-events: none;
  user-select: none;
}
.demo-browser-toolbar {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 28px;
  align-items: center;
  gap: 10px;
  height: 37px;
  padding: 0 10px;
  border-bottom: 1px solid #d5dfd4;
  background: linear-gradient(#fbfcf9, #edf1eb);
  box-shadow: inset 0 1px 0 #fff;
  color: #778078;
  font: 400 8px/1 var(--font-body);
}
.demo-browser-toolbar svg {
  display: block;
  flex: 0 0 auto;
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.demo-browser-controls { display: flex; align-items: center; gap: 13px; }
.demo-browser-dots { display: flex; flex: 0 0 auto; gap: 5px; }
.demo-browser-dots i { width: 7px; height: 7px; border: 1px solid #00000012; border-radius: 50%; box-shadow: inset 0 1px 0 #ffffff30; }
.demo-browser-dots i:nth-child(1), .aov-browser-dots i:nth-child(1) { background: #ff6058; }
.demo-browser-dots i:nth-child(2), .aov-browser-dots i:nth-child(2) { background: #ffbd2e; }
.demo-browser-dots i:nth-child(3), .aov-browser-dots i:nth-child(3) { background: #28c840; }
.demo-browser-history { display: none; align-items: center; gap: 7px; }
.demo-browser-history svg:last-child { opacity: .4; }
.demo-browser-address {
  display: flex;
  align-items: center;
  justify-content: center;
  justify-self: center;
  gap: 5px;
  width: min(100%, 310px);
  min-width: 0;
  height: 22px;
  padding: 0 7px;
  border: 1px solid #dde4da;
  border-radius: 6px;
  background: #ffffffb8;
  color: #5e6e62;
}
.demo-browser-address > span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.demo-browser-address > svg { width: 9px; height: 9px; }
.demo-browser-share { display: flex; align-items: center; justify-content: flex-end; }
.demo-browser > :is(.clocher-demo-window, .song-library-demo-screen, .atelier-demo-screen, .songbook-demo-screen, .announcements-demo-admin) {
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
@container browser-frame (min-width: 500px) {
  .demo-browser-toolbar { grid-template-columns: 92px minmax(0, 1fr) 92px; height: 41px; padding-inline: 14px; font-size: 9px; }
  .demo-browser-dots i { width: 8px; height: 8px; }
  .demo-browser-history { display: flex; }
  .demo-browser-address { height: 25px; }
  .demo-browser-share svg { width: 15px; height: 15px; }
}
@container browser-frame (max-width: 270px) {
  .demo-browser-toolbar { grid-template-columns: 35px minmax(0, 1fr) 16px; gap: 6px; height: 33px; padding-inline: 7px; font-size: 7px; }
  .demo-browser-dots { gap: 4px; }
  .demo-browser-dots i { width: 6px; height: 6px; }
  .demo-browser-address { gap: 4px; padding-inline: 4px; }
}