[hidden]{
  display:none !important;
}

.background-card__remove{
  position:absolute;
  top:4px;
  right:4px;
  border:none;
  background: rgba(0,0,0,0.45);
  color:#fff;
  border-radius:50%;
  width:20px;
  height:20px;
  font-size:12px;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
}

html:not(.app-ready) #rec-bar,
html:not(.app-ready) #rec-countdown,
html:not(.app-ready) #player-bar,
html:not(.app-ready) #recording-section,
html:not(.app-ready) #score-panel {
  display:none !important;
}
.background-upload{
  display:inline-flex;
  align-items:center;
  gap:6px;
}
#background-layer,
#overlay-layer{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-2;
  opacity:1;
}
#background-layer{
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  filter:saturate(1.05);
  transition: background-image .5s ease, opacity .7s ease;
}
#overlay-layer{
  z-index:-1;
  pointer-events:none;
  --ov-rgb: 10, 14, 18;
  --ov-opacity: 0.55;
  --ov-vignette: 0.55;
  --ov-blur: 0px;
  background:
    radial-gradient(
      1200px 800px at 50% 15%,
      rgba(255,255,255, calc(0.12 * (1 - var(--ov-vignette)))),
      rgba(0,0,0,0) 60%
    ),
    radial-gradient(
      1400px 900px at 50% 50%,
      rgba(0,0,0, calc(0.85 * var(--ov-vignette))),
      rgba(0,0,0,0) 55%
    ),
    linear-gradient(
      180deg,
      rgba(var(--ov-rgb), var(--ov-opacity)),
      rgba(var(--ov-rgb), calc(var(--ov-opacity) + 0.18))
    );
  backdrop-filter: blur(var(--ov-blur));
  transition: background 300ms ease, backdrop-filter 300ms ease, opacity .7s ease;
}

html.world-transition #background-layer,
html.world-transition #overlay-layer{
  will-change: opacity;
}

html.world-transition.world-transition--out #background-layer{
  opacity: var(--world-fade-background);
}

html.world-transition.world-transition--out #overlay-layer{
  opacity: var(--world-fade-overlay);
}

:root{
  --bg: #0b0f14;
  --panel: rgba(255,255,255,0.06);
  --border: rgba(255,255,255,0.10);
  --text: rgba(255,255,255,0.92);
  --muted: rgba(255,255,255,0.65);
  --chip: rgba(255,255,255,0.08);
  --btn: rgba(255,255,255,0.10);
  --btn-hover: rgba(255,255,255,0.16);
  --shadow: 0 16px 40px rgba(0,0,0,0.35);
  --danger: #ff6b6b;
  --danger-dark: #ff5353;
  --stage-haze: rgba(10,14,20,0.65);
  --stage-border: rgba(255,255,255,0.15);
  --main-blur: 8px;
  --stage-dim: rgba(8,12,18,0.28);
  --world-fade-background: 0.3;
  --world-fade-overlay: 0.35;
}

*{ box-sizing: border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  background: radial-gradient(1200px 800px at 20% 0%, rgba(120,160,255,0.20), transparent 60%),
              radial-gradient(900px 600px at 90% 10%, rgba(255,180,120,0.16), transparent 55%),
              var(--bg);
  color: var(--text);
}

.topbar{
  position: sticky;
  top: 0;
  z-index: 10;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(10px);
  background: rgba(10,14,20,0.65);
}

.topbar__brand{ display:flex; align-items:center; gap: 10px; }
.logo{
  width: 38px; height: 38px;
  display:grid; place-items:center;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(255,255,255,0.06);
  box-shadow: var(--shadow);
  font-weight: 700;
}
.brand__title{ font-weight: 700; letter-spacing: 0.2px; }
.brand__sub{ font-size: 12px; color: var(--muted); margin-top:2px; }

.topbar__right{
  display:flex;
  align-items:center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.topbar__actions{ display:flex; gap: 8px; flex-wrap: wrap; }

.container{
  max-width: 1100px;
  margin: 22px auto;
  padding: 0 16px 40px;
  display:grid;
  gap: 14px;
  grid-template-columns: 1fr;
}

.panel{
  border: 1px solid var(--border);
  background: var(--panel);
  border-radius: 18px;
  padding: 16px;
  box-shadow: var(--shadow);
}

.h1{ margin: 0 0 6px 0; font-size: 22px; }
.h2{ margin: 0 0 10px 0; font-size: 16px; }
.h3{ margin: 0 0 6px 0; font-size: 15px; }
.muted{ color: var(--muted); }
.small{ font-size: 12px; }
.performance-panel{
  margin-top: 18px;
  padding: 14px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 16px;
  background: rgba(255,255,255,0.02);
  display:flex;
  flex-direction:column;
  gap: 16px;
}
.performance-panel__header{
  display:flex;
  justify-content:space-between;
  gap: 16px;
  flex-wrap:wrap;
}
.style-buttons{
  display:flex;
  gap: 8px;
  flex-wrap:wrap;
}
.style-btn{
  border: 1px solid rgba(255,255,255,0.15);
  background: rgba(255,255,255,0.05);
  border-radius: 10px;
  padding: 6px 12px;
  font-size: 13px;
  color: var(--text);
  cursor:pointer;
  transition: background .15s ease, border-color .15s ease;
}
.style-btn:hover{
  background: rgba(255,255,255,0.1);
}
.style-btn--active{
  border-color: rgba(180,220,255,0.8);
  background: rgba(120,170,255,0.15);
  color: #fff;
}
.performance-controls{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}
.perf-control{
  display:flex;
  flex-direction:column;
  gap: 6px;
}
.perf-control__input{
  display:flex;
  align-items:center;
  gap: 10px;
}
.perf-value{
  min-width: 56px;
  text-align:right;
}
.perf-control input[type="range"]{
  flex:1;
}
.mono{ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace; }

.btn, .bowl-card{
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.btn{
  position:relative;
  border: 1px solid rgba(255,255,255,0.18);
  background: linear-gradient(140deg, rgba(255,255,255,0.08), rgba(120,160,255,0.08));
  color: var(--text);
  border-radius: 12px;
  padding: 10px 12px;
  cursor:pointer;
  transition: transform .08s ease, box-shadow .12s ease, background .12s ease, border-color .12s ease;
  user-select:none;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.18),
    0 6px 18px rgba(0,0,0,0.28);
}
.btn:hover{
  background: linear-gradient(140deg, rgba(255,255,255,0.10), rgba(120,160,255,0.12));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.24),
    0 10px 24px rgba(0,0,0,0.35);
}
.btn:active{
  transform: translateY(1px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.12),
    0 4px 10px rgba(0,0,0,0.3);
}
.btn__sub{
  display:block;
  font-size:11px;
  color: var(--muted);
  letter-spacing:0.03em;
}
.btn--danger{
  border-color: rgba(255,107,107,0.5);
  color: #fff;
  background: linear-gradient(120deg, rgba(255,107,107,0.85), rgba(255,107,150,0.85));
  box-shadow: 0 12px 30px rgba(255,107,107,0.25);
}
.btn--danger:hover{
  background: linear-gradient(120deg, rgba(255,107,107,1), rgba(255,107,150,1));
}
.btn--subtle{
  border-color: rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.05);
  color: var(--muted);
}
.btn--subtle:hover{
  background: rgba(255,255,255,0.08);
  color: var(--text);
}
.btn--icon{
  width: 36px;
  height: 36px;
  border-radius: 999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 0;
  font-size: 18px;
}
.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip: rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

.chip{
  border: 1px solid var(--border);
  background: var(--chip);
  border-radius: 999px;
  padding: 8px 10px;
  font-size: 12px;
  color: var(--muted);
}
.chip--status{
  font-weight: 600;
  color: var(--text);
}
#voice-count{
  min-width: 88px;
  text-align:center;
}

.row{
  display:flex;
  align-items:center;
  gap: 10px;
}
.label{ min-width: 64px; color: var(--muted); }

.stage-panel{
  display:flex;
  flex-direction:column;
  gap: 18px;
}
.stage-panel--focus{
  display:flex;
  flex-direction:column;
  min-height: calc(100vh - 220px);
}
.stage-panel__intro{
  display:flex;
  flex-wrap:wrap;
  gap: 14px 20px;
  align-items:flex-start;
  justify-content:space-between;
}
.stage-panel__hint{
  margin:0;
}
.stage-panel__selects{
  display:flex;
  flex-wrap:wrap;
  gap: 12px;
}
.layout-mode{
  margin-top: 10px;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
}
.layout-mode__toggle{
  display:flex;
  border: 1px solid var(--border);
  border-radius: 999px;
  overflow:hidden;
  --stage-shadow-strength: 0.3;
}
.layout-mode__btn{
  border:none;
  background: transparent;
  color: var(--muted);
  padding: 6px 14px;
  font-size: 13px;
  cursor:pointer;
  transition: background .12s ease, color .12s ease;
}
.layout-mode__btn--active{
  background: rgba(255,255,255,0.15);
  color: var(--text);
}
.layout-reset-btn{
  min-width: 120px;
}

.background-panel{
  margin-top: 16px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 16px;
  padding: 14px;
  display:flex;
  flex-direction:column;
  gap: 14px;
}
.background-panel__section{
  display:flex;
  flex-direction:column;
  gap: 8px;
}
.background-panel__empty{
  grid-column: 1 / -1;
  color: rgba(255,255,255,0.5);
  font-size: 12px;
  text-align: center;
  padding: 10px 4px;
}
.background-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
  gap: 10px;
}
.overlay-controls{
  display:flex;
  flex-direction:column;
  gap: 12px;
}
.overlay-mode{
  display:flex;
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 999px;
  overflow:hidden;
}
.overlay-mode__btn{
  flex:1;
  border:none;
  background: transparent;
  color: var(--muted);
  padding: 6px 14px;
  cursor:pointer;
  font-size: 13px;
  transition: background .12s ease, color .12s ease;
}
.overlay-mode__btn--active{
  background: rgba(255,255,255,0.18);
  color: var(--text);
}
.overlay-section{
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 14px;
  padding: 12px;
  background: rgba(255,255,255,0.03);
}
.overlay-custom-grid{
  display:grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(140px,1fr));
}
.overlay-value{
  font-size: 12px;
  min-width: 44px;
  text-align:right;
}
.overlay-reset{
  align-self:flex-start;
}
.form-field--color input[type="color"]{
  width: 48px;
  height: 32px;
  border: none;
  padding: 0;
  background: none;
  cursor:pointer;
}
.background-card{
  border: none;
  border-radius: 12px;
  overflow:hidden;
  height: 74px;
  cursor:pointer;
  background-size: cover;
  background-position: center;
  transition: box-shadow .15s ease, transform .15s ease;
  position:relative;
}
.background-card::after{
  content: attr(data-label);
  position:absolute;
  left: 8px;
  bottom: 6px;
  font-size: 11px;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.75);
}
.background-card--active{
  box-shadow: 0 0 0 2px rgba(180,220,255,0.85), 0 8px 20px rgba(0,0,0,0.35);
  transform: translateY(-2px);
}

.drawer-scrim{
  position:fixed;
  inset:0;
  background: rgba(6,10,16,0.55);
  cursor:pointer;
  z-index: 90;
}
.drawer{
  position:fixed;
  top:0;
  bottom:0;
  right:0;
  width:min(420px, 100%);
  background: rgba(8,12,18,0.9);
  border-left: 1px solid rgba(255,255,255,0.12);
  box-shadow: -18px 0 40px rgba(0,0,0,0.35);
  transform: translate3d(100%,0,0);
  transition: transform 240ms ease;
  z-index: 100;
  color: var(--text);
  backdrop-filter: blur(18px);
}
.drawer--open{
  transform: translate3d(0,0,0);
}
.drawer__inner{
  height:100%;
  display:flex;
  flex-direction:column;
}
.drawer__header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 20px 24px 12px;
  position:sticky;
  top:0;
  background: linear-gradient(180deg, rgba(8,12,18,0.95), rgba(8,12,18,0.4));
  backdrop-filter: blur(10px);
  z-index:1;
}
.drawer__title{
  margin:0;
  font-size: 18px;
}
.drawer__content{
  flex:1;
  overflow-y:auto;
  padding: 0 24px 36px;
  display:flex;
  flex-direction:column;
  gap: 16px;
}
.drawer-section{
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 18px;
  padding: 0 16px;
  background: rgba(255,255,255,0.02);
}
.drawer-section summary{
  list-style:none;
  cursor:pointer;
  padding: 14px 0;
  font-weight:600;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 8px;
}
.drawer-section summary::-webkit-details-marker{
  display:none;
}
.drawer-section summary::after{
  content:"+";
  font-weight:400;
  transition: transform 160ms ease;
}
.drawer-section[open] summary::after{
  transform: rotate(45deg);
}
.drawer-section__content{
  border-top: 1px solid rgba(255,255,255,0.08);
  padding: 12px 0 16px;
  display:flex;
  flex-direction:column;
  gap: 14px;
}
.drawer-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}

body.drawer-open{
  overflow:hidden;
}
html.drawer-open{
  --main-blur: 2px;
  --stage-dim: rgba(8,12,18,0.22);
}

@media (max-width: 720px){
  .drawer{
    width:100%;
    left:0;
    right:0;
    top:auto;
    height:85vh;
    border-left:none;
    border-top: 1px solid rgba(255,255,255,0.12);
    border-radius: 28px 28px 0 0;
    transform: translate3d(0,100%,0);
  }
  .drawer--open{
    transform: translate3d(0,0,0);
  }
  .drawer__header{
    padding-bottom: 16px;
  }
  .drawer__content{
    padding: 0 20px 32px;
  }
  .stage-panel--focus{
    min-height: auto;
  }
}

@media (min-width: 900px){
  .stage-panel--focus #bowl-stage{
    margin-top: auto;
    margin-bottom: 4vh;
  }
}

@keyframes stage-breath{
  0%{ opacity: 0.85; }
  50%{ opacity: 1; }
  100%{ opacity: 0.85; }
}

@keyframes halo-breath{
  0%{ opacity: 0.42; }
  50%{ opacity: 0.48; }
  100%{ opacity: 0.42; }
}
.form-field{
  display:flex;
  flex-direction:column;
  gap: 6px;
  font-size: 13px;
  min-width: 140px;
}
.form-label-text{ color: var(--muted); font-size: 12px; }
.form-field select,
.form-field input[type="text"]{
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.15);
  background: rgba(12,16,22,0.65);
  color: var(--text);
  padding: 8px 10px;
  font-size: 14px;
  font-family: inherit;
}
.form-field--range input[type="range"]{
  width: 160px;
}

.stage{
  position:relative;
  min-height: 430px;
  border-radius: 26px;
  border: 1px solid var(--stage-border);
  background: transparent;
  overflow:hidden;
  box-shadow: inset 0 0 60px rgba(0,0,0,0.35);
  isolation:isolate;
  backdrop-filter: blur(var(--main-blur));
}
.stage::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:0;
  background: var(--stage-theme-bg, transparent);
  opacity: var(--stage-theme-opacity, 1);
}
.stage::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background:
    linear-gradient(180deg, rgba(0,0,0,0), var(--stage-dim)),
    radial-gradient(circle at 50% 20%, rgba(255,255,255,0.05), transparent 40%);
  pointer-events:none;
}
.stage[data-theme="meadow"]{
  --stage-theme-opacity: 0.30;
  --stage-theme-bg:
    radial-gradient(circle at 20% 30%, rgba(180,255,210,0.18), transparent 45%),
    radial-gradient(circle at 80% 20%, rgba(255,220,180,0.14), transparent 50%),
    linear-gradient(180deg, rgba(40,65,50,0.28), rgba(10,16,18,0.52));
}
.stage[data-theme="hall"]{
  --stage-theme-opacity: 0.35;
  --stage-theme-bg:
    radial-gradient(circle at 50% 0%, rgba(255,210,150,0.22), transparent 55%),
    linear-gradient(180deg, rgba(25,22,32,0.35), rgba(12,10,16,0.55));
}
.stage[data-theme="void"]{
  --stage-theme-opacity: 0.30;
  --stage-theme-bg:
    radial-gradient(circle at 60% 30%, rgba(120,150,255,0.18), transparent 55%),
    linear-gradient(180deg, rgba(5,6,14,0.35), rgba(3,6,12,0.55));
}
.stage[data-theme="dawn"]{
  --stage-theme-opacity: 0.32;
  --stage-theme-bg:
    radial-gradient(circle at 30% 25%, rgba(255,180,160,0.22), transparent 60%),
    radial-gradient(circle at 70% 80%, rgba(140,180,255,0.18), transparent 55%),
    linear-gradient(180deg, rgba(30,20,35,0.35), rgba(10,8,15,0.58));
}
.stage[data-theme="majestic_particles"]{
  --stage-theme-opacity: 0.32;
  --stage-theme-bg:
    radial-gradient(circle at 50% 30%, rgba(160,190,255,0.22), transparent 55%),
    radial-gradient(circle at 70% 80%, rgba(100,140,220,0.16), transparent 60%),
    linear-gradient(180deg, rgba(5,6,12,0.35), rgba(3,5,10,0.55));
}
.stage__canvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
  z-index:2;
}
.stage__bowls{
  position:relative;
  width:100%;
  height:100%;
  z-index:3;
  border-radius: 18px;
  background: rgba(8,12,14,0.18);
  overflow:hidden;
  --stage-shadow-strength: 0.32;
  transition: background .8s ease, filter .8s ease, opacity .18s ease;
}
.stage__bowls::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,0.18) 0%,
      rgba(255,255,255,0.06) 25%,
      rgba(0,0,0,0.00) 45%,
      rgba(0,0,0,0.22) 75%,
      rgba(0,0,0,0.38) 100%
    );
  pointer-events:none;
  opacity:1;
  transition: opacity .8s ease;
}
.stage__bowls.is-playing::before{
  animation: stage-breath 8s ease-in-out infinite;
}
.stage__bowls::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(
      900px 520px at 50% 55%,
      rgba(6,10,14,0.30),
      rgba(6,10,14,0.00) 65%
    ),
    radial-gradient(
      circle at 50% 45%,
      rgba(0,0,0,0.12) 0%,
      rgba(0,0,0,0.08) 25%,
      rgba(0,0,0,0.00) 60%
    ),
    linear-gradient(
      180deg,
      rgba(0,0,0,0.00) 50%,
      rgba(0,0,0,0.20) 75%,
      rgba(0,0,0,var(--stage-shadow-strength)) 100%
    );
  pointer-events:none;
  opacity:1;
  transition: opacity .8s ease;
}
.stage__bowls.is-playing{
  --stage-shadow-strength: 0.45;
}

.stage__bowls.is-stopping{
  filter: saturate(0.85);
}
.stage__bowls.is-stopping::before{
  animation:none;
  opacity:0;
}
.stage__bowls.is-stopping::after{
  opacity:0.5;
  --stage-shadow-strength: 0.18;
}

.stage__bowls.is-switching{
  /* Avoid full disappearance during refresh */
  opacity:0.92;
  filter: saturate(0.95);
}

html.world-transition .stage__bowls::before,
html.world-transition .stage__bowls::after{
  transition: opacity .7s ease;
}
html.world-transition.world-transition--out .stage__bowls::before,
html.world-transition.world-transition--out .stage__bowls::after{
  opacity:0;
}

html.world-transition.world-transition--out .stage__bowls.is-stopping::after{
  opacity:0.25;
  --stage-shadow-strength: 0.12;
}

#listen-player{
  display:none;
  max-width:var(--container-width, 960px);
  margin: 0 auto;
  padding: 12px 18px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.15);
  background: rgba(8,12,18,0.6);
  backdrop-filter: blur(12px);
  color: var(--text);
  gap: 16px;
  align-items:center;
  justify-content:space-between;
}
#listen-player .btn{
  min-width:72px;
}
.listen-player__info{
  display:flex;
  flex-direction:column;
  gap:4px;
}
.listen-player__selector{
  min-width:220px;
  display:flex;
  flex-direction:column;
  gap:6px;
}
#listen-player-scene-select{
  width:100%;
  padding:8px 10px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,0.12);
  background: rgba(0,0,0,0.4);
  color: var(--text);
}
.listen-player__empty{
  font-size:12px;
  color: var(--muted);
}
.listen-player__label{
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:0.08em;
  color: var(--muted);
}
.listen-player__title{
  font-size:16px;
  font-weight:600;
}
.listen-player__progress{
  font-family: "JetBrains Mono", "Roboto Mono", monospace;
  font-size:13px;
  color: var(--muted);
}
.listen-player__controls{
  display:flex;
  gap:8px;
}

html.listen-mode #listen-player{
  display:flex;
}
html.listen-mode .drawer,
html.listen-mode #drawer-scrim,
html.listen-mode .drawer-scrim,
html.listen-mode #settings-toggle{
  display:none !important;
}
html.listen-mode .bowl-card,
html.listen-mode .layout-mode__btn,
html.listen-mode .layout-reset-btn{
  pointer-events:none;
}
html.listen-mode .stage-panel__hint,
html.listen-mode .drawer-section,
html.listen-mode .scene-manager,
html.listen-mode .background-panel,
html.listen-mode .scene-editor__appearance,
html.listen-mode .performance-panel{
  display:none !important;
}
html.listen-mode #recording-section,
html.listen-mode #rec-countdown{
  display:none !important;
}

.rec-panel{
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 16px;
  padding: 14px;
  background: rgba(255,255,255,0.03);
  display:flex;
  flex-direction:column;
  gap: 12px;
}
.rec-toggle{
  display:flex;
  align-items:center;
  gap: 8px;
  font-weight:600;
}
.rec-toggle input{
  width:18px;
  height:18px;
}
.rec-status{
  display:flex;
  align-items:center;
  gap: 12px;
}
.rec-indicator{
  display:flex;
  align-items:center;
  gap:6px;
  font-weight:600;
  color: var(--muted);
}
.rec-indicator::before{
  content:"";
  width:10px;
  height:10px;
  border-radius:50%;
  background: var(--muted);
  display:inline-block;
}
.rec-indicator--recording{
  color:#ff7b7b;
}
.rec-indicator--recording::before{
  background:#ff4d4d;
  animation: recPulse 1.2s ease-in-out infinite;
}
.rec-indicator--paused{
  color:#ffcd5c;
}
.rec-indicator--paused::before{
  background:#ffcd5c;
  animation:none;
}
.rec-indicator--ready::before{
  background: var(--muted);
  animation:none;
}
.rec-timer{
  font-family:"JetBrains Mono","Roboto Mono",monospace;
  font-size:14px;
}
.rec-controls{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.rec-countdown{
  position:absolute;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  font-size:72px;
  font-weight:700;
  color:#fff;
  text-shadow:0 12px 30px rgba(0,0,0,0.55);
  pointer-events:none;
  opacity:0;
}
.rec-countdown.rec-countdown--visible{
  display:flex;
  animation: countdownFade .9s ease-in-out forwards;
  opacity:1;
}

@keyframes recPulse{
  0%{ transform:scale(1); opacity:0.8; }
  50%{ transform:scale(1.4); opacity:1; }
  100%{ transform:scale(1); opacity:0.8; }
}

@keyframes countdownFade{
  0%{ opacity:1; transform:scale(1); }
  80%{ opacity:0.2; transform:scale(1.2); }
  100%{ opacity:0; transform:scale(1.3); }
}

#rec-bar{
  position:sticky;
  bottom:0;
  margin: 24px auto 0;
  max-width: 960px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.15);
  background: rgba(7,9,14,0.85);
  box-shadow: 0 18px 40px rgba(0,0,0,0.35);
  padding: 12px 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  flex-wrap: wrap;
  row-gap: 10px;
  backdrop-filter: blur(16px);
  z-index:4;
}
.rec-bar__left{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  flex:1;
}
.rec-bar__right{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:flex-end;
  flex:1;
  min-width:260px;
}
.rec-dot{
  width:12px;
  height:12px;
  border-radius:50%;
  background:#ff4d4d;
  animation: recPulse 1.2s ease-in-out infinite;
}
.rec-dot--paused{
  background:#ffcd5c;
  animation:none;
}
.rec-bar__status{
  font-weight:600;
  color: var(--text);
}
.rec-bar__time{
  font-family:"JetBrains Mono","Roboto Mono",monospace;
  font-size:14px;
  color: var(--muted);
}
.rec-bar__countdown{
  display:none;
  font-weight:600;
  color:#fff;
}
.rec-bar__countdown.rec-bar__countdown--visible{
  display:inline-block;
}
.rec-bar__right .btn{
  min-width:96px;
}

.score-panel{
  position:fixed;
  top:56px;
  left:0;
  bottom:0;
  width:320px;
  max-width:86vw;
  z-index:30;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 0 14px 14px 0;
  padding: 14px;
  background:
    linear-gradient(180deg, rgba(92,62,36,0.96), rgba(48,30,18,0.98));
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.06),
    inset 0 20px 40px rgba(0,0,0,0.45),
    0 30px 60px rgba(0,0,0,0.65);
  display:flex;
  flex-direction:column;
  gap:10px;
  transform: translateX(-100%);
  transition: transform .22s ease;
  pointer-events: none;
}
html.score-open #score-panel{
  transform: translateX(0);
  pointer-events: auto;
}
.score-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  letter-spacing:0.02em;
}
.score-header__left{
  display:flex;
  align-items:center;
  gap:8px;
  width:100%;
}
.score-title{
  font-weight:700;
  letter-spacing:0.05em;
}
.bowl-set-indicator{
  font-size:12px;
  color: var(--muted);
  letter-spacing:0.04em;
}
.score-header__actions{
  display:none;
}
.groove-actions{
  display:grid;
  gap:10px;
  width:100%;
  min-width:0;
}
.groove-actions__primary{
  display:grid;
  grid-template-columns: 1fr;
  gap:10px;
  min-width:0;
}
.tool-btn{
  min-height:52px;
  padding:12px 14px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  gap:2px;
  width:100%;
  box-sizing:border-box;
}
.tool-btn--small{
  min-height:44px;
}
.tool-btn__title{
  font-weight:700;
  letter-spacing:0.04em;
}
.tool-btn__sub{
  display:block;
  font-size:11px;
  opacity:0.75;
  letter-spacing:0.06em;
}

@media (max-width: 420px){
  .groove-actions__primary{
    grid-template-columns: 1fr;
  }
}
.groove-shelf{
  border:1px solid rgba(255,255,255,0.12);
  border-radius:12px;
  padding:10px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.06), rgba(0,0,0,0.12));
  display:flex;
  flex-direction:column;
  gap:8px;
}
.groove-shelf__title{
  font-weight:700;
  font-size:13px;
  letter-spacing:0.04em;
}
.groove-shelf__list{
  display:flex;
  flex-direction:column;
  gap:8px;
  max-height:180px;
  overflow:auto;
}
.groove-record{
  border:1px solid rgba(255,255,255,0.14);
  border-radius:8px;
  padding:10px 12px;
  background:
    linear-gradient(90deg, rgba(255,255,255,0.08), rgba(0,0,0,0.15));
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:center;
  cursor:pointer;
  letter-spacing:0.08em;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12);
  transition: transform .08s ease, box-shadow .12s ease, border-color .12s ease, background .12s ease;
}
.groove-record:hover{
  transform: translateX(4px);
  box-shadow: 0 10px 22px rgba(0,0,0,0.35);
}
.groove-record__meta{
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:0;
}
.groove-record__title{
  font-weight:700;
  font-size:13px;
  letter-spacing:0.08em;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.groove-record__sub{
  font-size:12px;
  color: var(--muted);
}
.groove-record--active{
  border-color: rgba(220,190,120,0.65);
  box-shadow: 0 10px 22px rgba(120,180,255,0.18);
  transform: translateX(8px);
  background:
    linear-gradient(90deg, rgba(220,190,120,0.35), rgba(0,0,0,0.2));
}
.score-list-wrap{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.score-empty{
  font-size:12px;
  color: var(--muted);
  letter-spacing:0.03em;
}
.bowl-set-section{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.bowl-set__label{
  font-size:12px;
  letter-spacing:0.05em;
  color: var(--muted);
}
.bowl-set__counter{
  font-size:12px;
  color: var(--muted);
  letter-spacing:0.05em;
}
.capacity-section{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.capacity-title{
  font-size:12px;
  letter-spacing:0.05em;
  color: var(--muted);
}
.capacity-select{
  width:100%;
  padding:10px 12px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,0.16);
  background: rgba(0,0,0,0.2);
  color: var(--text);
  letter-spacing:0.03em;
}
.capacity-desc{
  font-size:12px;
  color: var(--muted);
  letter-spacing:0.04em;
}
.bowl-set__select{
  width:100%;
  padding:10px 12px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,0.16);
  background: rgba(0,0,0,0.2);
  color: var(--text);
  letter-spacing:0.03em;
}
.bowl-set-custom{
  border:1px solid rgba(255,255,255,0.12);
  border-radius:10px;
  padding:10px;
  background: rgba(255,255,255,0.03);
}
.bowl-set-custom__grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:8px;
}
.bowl-chip{
  border:1px solid rgba(255,255,255,0.16);
  border-radius:8px;
  padding:8px;
  text-align:center;
  background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(0,0,0,0.15));
  cursor:pointer;
  transition: transform .08s ease, box-shadow .12s ease, border-color .12s ease;
  letter-spacing:0.08em;
}
.bowl-chip--active{
  border-color: rgba(140,200,255,0.7);
  box-shadow: 0 8px 18px rgba(120,180,255,0.28);
  transform: translateY(-1px);
}
.score-list{
  flex:1;
  overflow:auto;
  border:1px solid rgba(255,255,255,0.1);
  border-radius:12px;
  padding:8px;
  background: rgba(255,255,255,0.02);
}
.score-row{
  display:flex;
  align-items:center;
  gap:8px;
  padding:7px 10px;
  border-radius:8px;
  font-size:13px;
  color: var(--text);
  opacity:0.35;
  transition: background 120ms ease, opacity 120ms ease;
  cursor:pointer;
  letter-spacing:0.12em;
}
.score-row:hover{
  background: rgba(255,255,255,0.06);
}
.score-time{
  font-family:"JetBrains Mono","Roboto Mono",monospace;
  min-width:72px;
  color: var(--muted);
}
.score-desc{
  flex:1;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.score-row.score-active{
  opacity:0.95;
  font-weight:700;
  box-shadow: inset 0 0 0 1px rgba(140,200,255,0.5);
  background: rgba(120,180,255,0.12);
  text-shadow: 0 0 12px rgba(140,200,255,0.55);
}
.score-row.score-past{
  opacity:0.12;
}
.score-row.score-future{
  opacity:0.3;
}
.score-marker{
  width:3px;
  height:100%;
  border-radius:3px;
  background: linear-gradient(180deg, rgba(120,180,255,0.9), rgba(120,180,255,0.1));
}
.score-row.score-active .score-marker{
  background: linear-gradient(180deg, rgba(180,230,255,1), rgba(120,180,255,0.4));
}
.score-dropzone{
  border:1px dashed rgba(255,255,255,0.25);
  border-radius:12px;
  padding:10px;
  text-align:center;
  font-size:12px;
  color: var(--muted);
  background: rgba(255,255,255,0.03);
}
.score-dropzone--active{
  border-color: rgba(140,200,255,0.8);
  color:#cde6ff;
  background: rgba(140,200,255,0.08);
}
.score-tab{
  position:fixed;
  top:92px;
  left:0;
  height:56px;
  padding: 0 18px 0 14px;
  display:inline-flex;
  align-items:center;
  gap:10px;
  border-radius: 0 16px 16px 0;
  z-index:60;
  color: rgba(255,255,255,0.92);
  letter-spacing:0.06em;
  font-weight:700;
  background:
    radial-gradient(120px 60px at 30% 30%, rgba(255,255,255,0.14), rgba(0,0,0,0)),
    linear-gradient(180deg, rgba(110,70,35,0.92), rgba(60,35,18,0.96));
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.18),
    inset 0 -10px 18px rgba(0,0,0,0.35),
    0 10px 30px rgba(0,0,0,0.55);
  cursor:pointer;
  transition: transform .14s ease, box-shadow .16s ease, filter .16s ease, left .18s ease;
  overflow:hidden;
}
.score-tab::before{
  content:"";
  position:absolute;
  inset:7px 10px 7px 10px;
  border-radius:12px;
  border: 1px dashed rgba(255,255,255,0.18);
  opacity:0.7;
  pointer-events:none;
}
.score-tab::after{
  content:"";
  position:absolute;
  left:12px;
  width:10px;
  height:10px;
  border-radius:50%;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.55), rgba(160,120,60,0.75), rgba(90,60,25,0.95));
  box-shadow: 0 2px 6px rgba(0,0,0,0.45);
  pointer-events:none;
}
.score-tab:hover{
  transform: translateX(2px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.20),
    inset 0 -12px 18px rgba(0,0,0,0.38),
    0 14px 34px rgba(0,0,0,0.62);
}
.score-tab:active{
  transform: translateX(1px) translateY(1px);
  filter: brightness(0.96);
}
.score-tab:focus-visible{
  outline: 2px solid rgba(220,190,120,0.75);
  outline-offset: 3px;
}
.score-tab__label{
  padding-left:10px;
}
.score-tab__chev{
  display:inline-block;
  font-size:20px;
  opacity:0.9;
  transform: rotate(0deg);
  transition: transform .18s ease;
}
html.score-open .score-tab__chev{
  transform: rotate(180deg);
}
html.score-open #score-tab{
  left:320px;
}
#score-backdrop{
  position:fixed;
  inset:0;
  background: rgba(0,0,0,0.35);
  z-index:29;
  opacity:0;
  pointer-events:none;
  transition: opacity .22s ease;
}
html.score-open #score-backdrop{
  opacity:1;
  pointer-events:auto;
}
.score-row.score-hit{
  color:#e9f4ff;
}
.score-row.score-stop{
  color:#ffd9d9;
}

#score-backdrop{
  position:fixed;
  inset:0;
  background: rgba(0,0,0,0.35);
  z-index:29;
  opacity:0;
  pointer-events:none;
  transition: opacity .22s ease;
}
html.score-open #score-backdrop{
  opacity:1;
  pointer-events:auto;
}
.score-tab{
  position:fixed;
  top:120px;
  left:0;
  z-index:31;
  transform: translateX(0);
  border-radius: 0 12px 12px 0;
}
html.score-open #score-tab{
  left:320px;
}

#record-slot{
  position:absolute;
  left:50%;
  bottom:160px;
  transform: translateX(-50%);
  width: 360px;
  max-width: 90vw;
  height: 72px;
  z-index:20;
  pointer-events:none;
  opacity:0;
  transition: opacity .2s ease;
}
#record-slot[hidden]{
  display:none !important;
}
#record-slot-frame{
  position:absolute;
  inset:0;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(80,90,110,0.9), rgba(20,24,32,0.95));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.2),
    0 18px 32px rgba(0,0,0,0.35);
}
#record-slot-glass{
  position:absolute;
  inset:6px;
  border-radius:12px;
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  border: 1px solid rgba(255,255,255,0.08);
  backdrop-filter: blur(8px);
}
#record-slot-label{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:12px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color: rgba(230,235,255,0.6);
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}
#record-ghost{
  position:fixed;
  left:-220px;
  top:50%;
  width: 180px;
  height: 180px;
  margin-top:-90px;
  z-index:28;
  pointer-events:none;
  opacity:0;
  transform: translateX(-60px);
  transition: opacity .2s ease, transform .7s cubic-bezier(.2,.8,.3,1);
}
#record-ghost-disc{
  width:100%;
  height:100%;
  border-radius:50%;
  background:
    radial-gradient(40% 40% at 50% 50%, rgba(255,255,255,0.15), rgba(0,0,0,0)),
    radial-gradient(60% 60% at 50% 50%, rgba(255,255,255,0.05), rgba(0,0,0,0)),
    linear-gradient(135deg, rgba(90,120,160,0.55), rgba(30,40,60,0.8));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.25),
    0 14px 32px rgba(0,0,0,0.4);
}
#record-ghost-label{
  position:absolute;
  bottom:-28px;
  left:0;
  right:0;
  text-align:center;
  font-size:12px;
  letter-spacing:0.08em;
  color: rgba(220,230,255,0.8);
}
html.record-setting #record-ghost{
  opacity:1;
  transform: translateX(280px);
}
html.record-setting #record-slot{
  filter: drop-shadow(0 6px 18px rgba(120,180,255,0.35));
  opacity:1;
}
html.has-loaded-record:not(.is-playing):not(.is-paused) #record-slot{
  opacity:0.35;
}
html.is-playing #record-slot,
html.is-paused #record-slot{
  opacity:0;
}

#bowl-stage{
  position:relative;
  overflow:hidden;
}
#bowl-stage::before{
  content:"";
  position:absolute;
  inset:-20%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  mix-blend-mode:soft-light;
  pointer-events:none;
}
#bowl-stage::after{
  content:"";
  position:absolute;
  inset:-8%;
  pointer-events:none;
  background: radial-gradient(120% 120% at 50% 50%, rgba(0,0,0,0) 55%, rgba(0,0,0,0.4) 100%);
}
.analog-alive{
  animation: analogDrift 9s ease-in-out infinite;
}

@keyframes analogDrift{
  0%{ transform: translate3d(0,0,0); }
  50%{ transform: translate3d(1px,-1px,0); }
  100%{ transform: translate3d(0,0,0); }
}

@media (max-width: 960px){
  .score-panel{
    width:260px;
  }
  html.score-open #score-tab{
    left:260px;
  }
  .container{
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px){
  #rec-bar{
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    margin:0;
    border-radius:0;
    padding: 14px 18px 18px;
    max-width:100%;
  }
  .rec-bar__left{
    flex:1;
  }
  .rec-bar__right{
    flex-wrap:wrap;
    flex:1;
  }
  .rec-bar__right .btn{
    flex:1 1 48%;
  }
}

@media (max-width: 540px){
  #rec-bar{
    flex-direction:column;
    align-items:stretch;
  }
  .rec-bar__right{
    justify-content:stretch;
  }
  .rec-bar__right .btn{
    flex:1 1 100%;
  }
}

.player-bar{
  position:sticky;
  bottom:0;
  margin: 24px auto 0;
  max-width: 960px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.15);
  background: rgba(7,9,14,0.85);
  box-shadow: 0 18px 40px rgba(0,0,0,0.35);
  padding: 12px 18px;
  display:grid;
  grid-template-columns: 1fr auto 1fr;
  align-items:center;
  gap: 12px;
  row-gap: 10px;
  backdrop-filter: blur(16px);
  z-index:4;
}
.player-bar__left{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}
.player-meta{
  min-width:0;
}
.player-title{
  font-weight:700;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.player-sub{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.player-bar__center{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  flex-wrap:wrap;
}
.player-bar__right{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:10px;
}
.player-time{
  color: var(--muted);
}
.player-seek{
  grid-column: 1 / -1;
  width:100%;
}

@media (max-width: 768px){
  .player-bar{
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    margin:0;
    border-radius:0;
    padding: 14px 18px 18px;
    max-width:100%;
    grid-template-columns: 1fr;
    align-items:stretch;
  }
  .player-bar__center{
    justify-content:stretch;
  }
  .player-bar__center .btn{
    flex:1 1 30%;
  }
  .player-bar__right{
    justify-content:space-between;
  }
}

.log-viewer{
  border: 1px solid var(--border);
  background: var(--panel);
  border-radius: 14px;
  padding: 12px;
  display:flex;
  flex-direction:column;
  gap: 10px;
}
.log-viewer__header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap: 12px;
}
.log-viewer__title{
  font-weight:700;
}
.log-viewer__filter{
  display:flex;
  align-items:center;
  gap:6px;
}
.log-viewer__list{
  max-height: 260px;
  overflow:auto;
  display:flex;
  flex-direction:column;
  gap: 6px;
}
.log-entry{
  display:flex;
  justify-content:space-between;
  gap: 8px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  padding: 6px 8px;
  background: rgba(255,255,255,0.04);
}
.log-entry__meta{
  display:flex;
  gap:8px;
  align-items:center;
}
.log-entry__type{
  font-weight:600;
}
.log-entry__time{
  font-family:"JetBrains Mono","Roboto Mono",monospace;
  color: var(--muted);
}
.log-entry--active{
  border-color: rgba(120,170,255,0.8);
  background: rgba(120,170,255,0.15);
  box-shadow: 0 0 0 1px rgba(120,170,255,0.4);
}

#record-drawer{
  position:fixed;
  top:140px;
  left:-320px;
  width:320px;
  height:260px;
  pointer-events:none;
  transition: transform .6s ease, opacity .4s ease;
  z-index:5;
  display:none;
  opacity:0;
}
html.listen-mode #record-drawer{
  display:block;
}
#record-drawer .record-drawer__inner{
  width:100%;
  height:100%;
  border-radius:18px;
  background: rgba(6,8,12,0.75);
  border:1px solid rgba(255,255,255,0.12);
  backdrop-filter: blur(14px);
  padding:20px;
  box-shadow: 0 25px 40px rgba(0,0,0,0.45);
  display:flex;
  align-items:center;
  gap:18px;
}
.record-drawer--open{
  transform: translateX(320px);
  opacity:1;
}
.record-drawer--closing{
  opacity:0;
  transform: translateX(0);
}
.record-sleeve{
  width:140px;
  height:190px;
  border-radius:12px;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.12), rgba(255,255,255,0)),
    linear-gradient(45deg, rgba(46,40,72,0.95), rgba(18,13,30,0.95));
  border:1px solid rgba(255,255,255,0.08);
  box-shadow: inset 0 0 25px rgba(0,0,0,0.35);
  position:relative;
  overflow:hidden;
  transform: translateX(20px);
  transition: transform .6s ease;
}
.record-sleeve__gloss{
  position:absolute;
  top:-20%;
  left:-20%;
  width:70%;
  height:140%;
  background: linear-gradient(120deg, rgba(255,255,255,0.35), transparent 55%);
  transform: rotate(20deg);
  opacity:0.35;
}
.record-disc-wrapper{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
}
.record-disc-rotor{
  width:190px;
  height:190px;
  position:relative;
  opacity:0;
  transform: translateX(-30px) rotate(-8deg);
  transition: opacity .5s ease, transform .5s ease;
}
.record-drawer--open .record-disc-rotor{
  opacity:1;
  transform: translateX(0) rotate(0deg);
}
.record-disc{
  width:190px;
  height:190px;
  border-radius:50%;
  background:
    radial-gradient(circle at 50% 30%, rgba(255,255,255,0.15), transparent 55%),
    radial-gradient(circle, rgba(0,0,0,0.9), rgba(0,0,0,1));
  position:relative;
  animation: record-spin 6s linear infinite;
  animation-play-state: paused;
}
.record-disc::before{
  content:"";
  position:absolute;
  inset:22% 22%;
  border-radius:50%;
  background: rgba(255,205,150,0.9);
  box-shadow: inset 0 0 10px rgba(0,0,0,0.35);
}
.record-disc::after{
  content:"";
  position:absolute;
  inset:38% 38%;
  border-radius:50%;
  border:1px solid rgba(255,255,255,0.08);
  box-shadow: inset 0 0 6px rgba(0,0,0,0.45);
}
.record-disc__inner{
  position:absolute;
  inset:26% 26%;
  border-radius:50%;
  border:1px solid rgba(255,255,255,0.08);
  box-shadow: inset 0 0 8px rgba(0,0,0,0.45);
  pointer-events:none;
}
.record-disc__center{
  position:absolute;
  inset:44% 44%;
  border-radius:50%;
  background:#111;
  box-shadow:0 0 6px rgba(0,0,0,0.55);
  pointer-events:none;
}
.record-drawer--open .record-sleeve{
  transform: translateX(0);
}
.record-drawer--open .record-disc{
  opacity:1;
  transform: translateX(0) rotate(0deg);
}
.record-disc--spinning{
  animation-play-state: running;
}
.record-disc--paused{
  animation-play-state: paused;
}
.record-disc--winddown{
  animation: record-spin-slow 1.2s ease-out forwards;
}
.record-disc-rotor--swapping{
  animation: record-swap 0.5s ease-in-out;
}
.record-drawer--swapping .record-label{
  opacity:0;
  transform: translateX(20px);
}
.record-label{
  text-align:center;
  font-weight:600;
  color: var(--text);
  min-height:24px;
  transition: opacity .3s ease, transform .3s ease;
}
@keyframes record-spin{
  from{ transform: rotate(0deg); }
  to{ transform: rotate(360deg); }
}
@keyframes record-spin-slow{
  0%{ transform: rotate(0deg); }
  100%{ transform: rotate(90deg); }
}
@keyframes record-swap{
  0%{ transform: translateX(0); opacity:1; }
  40%{ transform: translateX(40px); opacity:0; }
  60%{ transform: translateX(-40px); opacity:0; }
  100%{ transform: translateX(0); opacity:1; }
}
.stage[data-mode="layout"] .bowl-visual{
  cursor: grab;
}
.stage[data-mode="layout"] .bowl-visual:active{
  cursor: grabbing;
}
.stage{
  position:relative;
}
.stage[data-mode="layout"]::after,
.stage[data-mode="play"]::after{
  content: attr(data-mode);
  position:absolute;
  top:10px;
  right:12px;
  padding:4px 10px;
  border-radius:12px;
  font-size:11px;
  letter-spacing:0.04em;
  text-transform:uppercase;
  background: rgba(255,255,255,0.12);
  color:#fff;
  backdrop-filter: blur(8px);
  pointer-events:none;
  z-index:6;
}
.stage[data-mode="layout"]::after{
  background: rgba(120,180,255,0.25);
  border:1px solid rgba(160,210,255,0.6);
  opacity: 0.85;
  font-weight: 600;
  letter-spacing: 0.12em;
  content: "LAYOUT MODE";
}
.stage[data-mode="play"]::after{
  background: rgba(255,255,255,0.10);
  border:1px solid rgba(255,255,255,0.18);
}
.bowl-wrap{
  --bowlScale: var(--bowl-size, 1);
  position:absolute;
  left: var(--bowl-x, 50%);
  top: var(--bowl-y, 50%);
  transform: translate3d(-50%, -50%, 0) scale(var(--bowlScale, 1));
  transform-origin: center;
  touch-action:none;
  width: min(20vw, 140px);
  height: min(20vw, 140px);
  filter: drop-shadow(0 10px 16px rgba(0,0,0,0.35));
  pointer-events:auto;
  /* Visual resonance fade-out is intentionally slower than audio stop */
  transition:
    filter 1.9s ease-out,
    transform .25s ease,
    left .12s linear,
    top .12s linear,
    opacity 1.9s ease-out;
  will-change: left, top, transform;
}
.bowl-wrap.is-dragging{
  transition: none !important;
}
.bowl-wrap.is-playing{
  z-index: 10;
  filter:
    drop-shadow(0 18px 30px rgba(0,0,0,0.55))
    drop-shadow(0 0 24px rgba(150,200,255,0.55));
  transition: filter .25s ease, transform .2s ease;
}

.bowl-fx{
  --fxScale: 1;
  --fxY: 0px;
  width:100%;
  height:100%;
  transform: translateY(var(--fxY)) scale(var(--fxScale));
  transition: transform .28s ease, filter 1.9s ease-out, opacity 1.9s ease-out;
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:none;
}
.bowl-wrap.is-playing .bowl-fx{
  --fxScale: 1.05;
  animation: bowlVibe 2.1s ease-in-out infinite;
}
.bowl-wrap.is-wobble .bowl-fx{
  --fxScale: 1.02;
  --fxY: -3px;
  animation:
    bowlVibe 2.1s ease-in-out infinite,
    bowlFloat 3.2s ease-in-out infinite;
}
.stage[data-mode="layout"] .bowl-visual{
  cursor: grab;
}
.stage[data-mode="layout"] .bowl-visual:active{
  cursor: grabbing;
}
.bowl-wrap::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:-6%;
  width:70%;
  height:22%;
  transform: translateX(-50%);
  background: radial-gradient(
    ellipse at center,
    rgba(200,255,235,0.18) 0%,
    rgba(200,255,235,0.10) 35%,
    rgba(200,255,235,0.00) 70%
  );
  filter: blur(8px);
  opacity:0.25;
  pointer-events:none;
  transition: opacity 0.6s ease;
}
.bowl-wrap.is-playing::after{
  opacity:0.45;
  animation: halo-breath 5.5s ease-in-out infinite;
}
.bowl-wrap > *{
  pointer-events:auto;
}
.bowl-card{
  position:relative;
  width:100%;
  height:100%;
  border-radius:50%;
  border: 1px solid rgba(255,255,255,0.18);
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,0.65), transparent 50%),
    radial-gradient(circle, rgba(255,255,255,0.08), rgba(255,255,255,0.02));
  background-color: rgba(255,255,255,0.05);
  box-shadow:
    inset 0 6px 14px rgba(255,255,255,0.25),
    0 15px 35px rgba(0,0,0,0.35);
  cursor:pointer;
  color: var(--text);
  opacity: 0.96;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap: 2px;
  transform: translateZ(0);
  /* Visual resonance fade-out is intentionally slower than audio stop */
  transition:
    transform .2s ease,
    box-shadow 2.2s ease-out,
    border-color 1.4s ease-out,
    filter 2.2s ease-out,
    opacity 2s ease-out;
  user-select:none;
  /* reduce blur to avoid bokeh/ghosting on some GPUs */
  backdrop-filter: none;
  z-index:1;
}
.bowl-wrap,
.bowl-wrap *{
  -webkit-user-select:none;
  user-select:none;
  -webkit-touch-callout:none;
}
.bowl-card{
  touch-action:none;
}
.bowl-card::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:50%;
  background: radial-gradient(circle, rgba(255,255,255,0.15), transparent 60%);
  opacity:0;
  transition: opacity 1.6s ease-out;
  pointer-events:none;
}
.bowl-card:hover{
  box-shadow:
    inset 0 8px 18px rgba(255,255,255,0.12),
    0 18px 34px rgba(0,0,0,0.35),
    0 0 24px rgba(150,190,255,0.25);
}
.bowl-card:focus-visible{
  outline: 2px solid rgba(180,220,255,0.8);
  outline-offset: 4px;
}
.bowl-card__label{
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 1px;
}
.bowl-card__note{
  font-size: 12px;
  color: var(--muted);
}
.bowl-card[data-playing="1"]{
  border-color: rgba(190,225,255,0.9);
  filter: saturate(1.05);
  box-shadow:
    0 22px 52px rgba(0,0,0,0.6),
    0 0 42px rgba(160,210,255,0.48);
}
.bowl-card[data-playing="1"]::after{
  opacity:1;
  animation: bowlPulse 3.6s ease-in-out infinite;
}
.bowl-card[data-playing="1"]::before{
  content:"";
  position:absolute;
  inset:-20%;
  border-radius:50%;
  background: radial-gradient(circle, rgba(140,200,255,0.35), transparent 72%);
  filter: blur(26px);
  opacity:0.95;
  z-index:-1;
}
.bowl-card[data-playing="1"] .bowl-card__label,
.bowl-card[data-playing="1"] .bowl-card__note{
  text-shadow:
    0 0 8px rgba(200,240,255,0.85),
    0 0 16px rgba(120,170,255,0.55);
}
@keyframes bowlPulse{
  0%{ transform: scale(1); opacity:0.8; }
  50%{ transform: scale(1.05); opacity:1; }
  100%{ transform: scale(1); opacity:0.8; }
}

.bowl-card[data-playing="1"]{
  animation: none;
}
.bowl-card::before,
.bowl-card::after{
  pointer-events:none;
}
.bowl-card::before{
  transition:
    opacity 1.8s ease-out,
    filter 2s ease-out;
}
@keyframes bowlVibe{
  0%{ transform: translate3d(0,0,0) rotate(0deg) scale(var(--fxScale, 1)); }
  30%{ transform: translate3d(0,-0.6px,0) rotate(-0.25deg) scale(var(--fxScale, 1)); }
  60%{ transform: translate3d(0,0.4px,0) rotate(0.22deg) scale(var(--fxScale, 1)); }
  100%{ transform: translate3d(0,0,0) rotate(0deg) scale(var(--fxScale, 1)); }
}
.bowl-card[data-wobble="1"]::before{
  opacity: calc(0.16 + var(--energy, 0) * 0.45);
  filter: blur(calc(14px + var(--energy, 0) * 6px));
  background: radial-gradient(circle at 50% 50%,
    rgba(255,255,255,0.30),
    rgba(255,255,255,0.10) 45%,
    rgba(255,255,255,0.00) 70%
  );
  animation: haloBreath calc(2.6s - (var(--energy, 0) * 1.1s)) ease-in-out infinite;
}
.bowl-card[data-wobble="1"]::after{
  opacity: calc(0.14 + var(--energy, 0) * 0.40);
  background: radial-gradient(circle at 50% 50%,
    rgba(255,255,255,0.00) 54%,
    rgba(255,255,255,0.18) 56%,
    rgba(255,255,255,0.00) 62%
  );
  animation: ripplePulse calc(3.4s - (var(--energy, 0) * 1.4s)) ease-in-out infinite;
}
@keyframes bowlFloat{
  0%{ transform: translateY(0) scale(var(--fxScale, 1)); }
  50%{ transform: translateY(-3px) scale(calc(var(--fxScale, 1) * 1.02)); }
  100%{ transform: translateY(0) scale(var(--fxScale, 1)); }
}
.bowl-wrap.is-playing .bowl-fx{
  animation: bowlVibe 2.1s ease-in-out infinite;
}
.bowl-wrap.is-wobble .bowl-fx{
  animation:
    bowlVibe 2.1s ease-in-out infinite,
    bowlFloat calc(3.2s - (var(--energy, 0) * 1.4s)) ease-in-out infinite;
  will-change: transform;
}
@keyframes haloBreath{
  0%{ transform: scale(0.98); }
  50%{ transform: scale(1.06); }
  100%{ transform: scale(0.98); }
}
@keyframes ripplePulse{
  0%{ transform: scale(1.0); }
  50%{ transform: scale(calc(1.08 + var(--energy, 0) * 0.20)); }
  100%{ transform: scale(1.0); }
}

.scene-editor{
  display:flex;
  flex-direction:column;
  gap: 18px;
}
.scene-editor__appearance{
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 16px;
  padding: 14px;
  background: rgba(255,255,255,0.02);
}
.scene-editor__title{
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 8px;
}
.scene-editor__controls{
  display:flex;
  flex-wrap:wrap;
  gap: 12px;
  align-items:center;
}
.scene-editor__value{
  min-width: 54px;
  text-align:center;
}

.scene-manager{
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 16px;
  padding: 14px;
  display:flex;
  flex-direction:column;
  gap: 12px;
  background: rgba(255,255,255,0.02);
}
.scene-manager__title{
  font-size: 15px;
  font-weight:600;
}
.scene-manager__controls{
  display:flex;
  flex-wrap:wrap;
  gap: 12px;
  align-items:flex-end;
}
.scene-manager__actions{
  display:flex;
  gap: 8px;
  flex-wrap:wrap;
}
.scene-collection{
  display:flex;
  flex-wrap:wrap;
  gap: 12px;
  align-items:flex-end;
}

.scene-shelf{
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 16px;
  padding: 14px;
  display:flex;
  flex-direction:column;
  gap: 16px;
  background: rgba(255,255,255,0.02);
}

.scene-shelf__form{
  display:flex;
  flex-wrap:wrap;
  gap: 12px;
  align-items:flex-end;
}

.scene-shelf__form .btn{
  height: 42px;
}

.scene-shelf__list{
  display:flex;
  flex-direction:column;
  gap: 10px;
}

.scene-record-row{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.04);
  overflow:hidden;
}

.scene-record-row__info{
  flex:1;
  min-width:0;
}

.scene-record-row__title{
  font-weight:600;
  margin-bottom:4px;
}

.scene-record-row__progress{
  font-size:12px;
  color: var(--muted);
}

.scene-record-row__actions{
  display:flex;
  gap: 8px;
  flex-wrap:wrap;
  justify-content:flex-start;
}

.scene-record-row__btn{
  flex: 1 1 auto;
  min-width:92px;
}

html.playback-playing .bowl-card{
  pointer-events:none;
}

.scene-panel{
  display:flex;
  gap: 12px;
  flex-wrap:wrap;
}

.footer{
  padding: 18px 16px 30px;
  text-align:center;
  border-top: 1px solid var(--border);
  background: rgba(10,14,20,0.25);
}

@media (max-width: 600px){
  .stage{
    min-height: 320px;
  }
  .bowl-card{
    width: calc(var(--bowl-size,1) * min(32vw, 120px));
    height: calc(var(--bowl-size,1) * min(32vw, 120px));
  }
  .stage-panel__selects,
  .scene-editor__controls,
  .scene-manager__controls,
  .scene-collection{
    flex-direction:column;
    align-items:flex-start;
  }
  .form-field--range input[type="range"]{
    width: 100%;
  }
}

.toast-stack{
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  display:flex;
  flex-direction:column;
  gap: 10px;
  pointer-events: none;
  width: min(90vw, 380px);
  z-index: 50;
}
.toast{
  pointer-events:auto;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(15,18,24,0.9);
  color: var(--text);
  box-shadow: 0 20px 40px rgba(0,0,0,0.35);
  padding: 14px 16px;
  opacity: 0;
  transform: translate3d(0,10px,0);
  transition: opacity .2s ease, transform .2s ease;
}
.toast--visible{
  opacity: 1;
  transform: translate3d(0,0,0);
}
.toast--error{
  border-color: rgba(255,107,107,0.5);
  background: rgba(32,10,10,0.9);
}
.toast__message{
  font-weight: 600;
  margin-bottom: 4px;
}
.toast__detail{
  font-size: 12px;
  color: var(--muted);
  line-height: 1.4;
}

/* ===== Sharp Mode Overrides (make bowls crisp) ===== */
.bowl-wrap{
  transform: translate3d(-50%, -50%, 0) scale(var(--bowlScale, 1)) !important;
  filter: drop-shadow(0 10px 16px rgba(0,0,0,0.35)) !important; /* keep shadow, no blur filter */
}

.bowl-card{
  backdrop-filter: none !important;   /* remove constant blur */
  -webkit-backdrop-filter: none !important;
}

.bowl-wrap::after{
  filter: none !important;            /* remove halo blur under bowl */
  opacity: 0.10 !important;           /* keep subtle base glow only */
}

.bowl-card[data-playing="1"]::before{
  filter: none !important;            /* remove big bloom blur */
  opacity: 0.35 !important;           /* keep presence without haze */
}

.bowl-card[data-wobble="1"]::before{
  filter: none !important;            /* wobble blur off */
}

.bowl-card[data-playing="1"] .bowl-card__label,
.bowl-card[data-playing="1"] .bowl-card__note{
  text-shadow: none !important;       /* stop text glow bleeding */
}

/* ===== Crisp Boost (no blur, more clarity) ===== */

/* 1) Bowl surface: increase contrast a bit */
.bowl-card{
  background: radial-gradient(120% 120% at 35% 30%,
    rgba(255,255,255,0.24) 0%,
    rgba(255,255,255,0.10) 40%,
    rgba(10,12,14,0.82) 100%
  ) !important;
  border-color: rgba(255,255,255,0.14) !important;
}

/* 2) Inner shadow: define edge (still soft, not blurry) */
.bowl-card::after{
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.08),
    inset 0 -14px 22px rgba(0,0,0,0.48) !important;
}

/* 3) Labels: make text readable (not glowing, just crisp) */
.bowl-card__label{
  opacity: 0.92 !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  text-shadow: 0 1px 0 rgba(0,0,0,0.55) !important;
}
.bowl-card__note{
  opacity: 0.70 !important;
  font-weight: 600 !important;
  text-shadow: 0 1px 0 rgba(0,0,0,0.50) !important;
}

/* 4) Remove the "foggy" base halo even more (if still hazy) */
.bowl-wrap::after{
  opacity: 0.04 !important; /* was 0.10 */
}

/* 5) Optional: if stage overlay is too strong, slightly lift it */
#overlay-layer{
  --ov-opacity: 0.46 !important; /* reduce darkness a bit */
}

/* === Reduce stage fog for clarity === */
.stage__bowls::after{
  opacity: 0.45 !important;
  transition: none !important;
  background:
    radial-gradient(900px 520px at 50% 55%,
      rgba(6,10,14,0.14),
      rgba(6,10,14,0.00) 65%
    ),
    radial-gradient(circle at 50% 45%,
      rgba(0,0,0,0.08) 0%,
      rgba(0,0,0,0.04) 25%,
      rgba(0,0,0,0.00) 60%
    ),
    linear-gradient(180deg,
      rgba(0,0,0,0.00) 55%,
      rgba(0,0,0,0.12) 78%,
      rgba(0,0,0,var(--stage-shadow-strength)) 100%
    ) !important;
}

/* === Improve bowl label clarity === */
.bowl-card__label{
  opacity: 0.95 !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  text-shadow: 0 1px 0 rgba(0,0,0,0.55) !important;
}
.bowl-card__note{
  opacity: 0.72 !important;
  font-weight: 600 !important;
  text-shadow: 0 1px 0 rgba(0,0,0,0.45) !important;
}