:root {
  --bg: #060608;
  --panel: #0d0d11;
  --panel2: #151419;
  --line: #2a2727;
  --line-warm: #65543b;
  --text: #f4efe5;
  --muted: #918b82;
  --acid: #e1bd79;
  --cyan: #7de9ef;
  --violet: #aa8aff;
  --danger: #ff6b73;
  --spectral: linear-gradient(90deg, #64edf2, #a879ff 48%, #ff72b5);
  --radius: 12px;
}

html { color-scheme: dark; }
body {
  background:
    radial-gradient(circle at 58% 38%, rgba(92, 56, 126, .08), transparent 28rem),
    radial-gradient(circle at 18% 92%, rgba(172, 113, 47, .06), transparent 25rem),
    #060608;
}
body::before {
  content: "";
  position: fixed;
  inset: var(--pm-nav-h, 0) 0 0;
  pointer-events: none;
  opacity: .17;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 38px 38px;
  mask-image: radial-gradient(circle at center, #000, transparent 82%);
}

.app { grid-template-rows: 74px minmax(0, 1fr) 104px; }
.topbar {
  position: relative;
  z-index: 12;
  gap: 22px;
  padding: 0 18px;
  border-bottom-color: rgba(225, 189, 121, .19);
  background: rgba(7, 7, 10, .9);
  backdrop-filter: blur(24px) saturate(1.2);
}
.luminarium-brand { display: flex; align-items: center; gap: 11px; min-width: max-content; }
.luminarium-brand > span:last-child { display: grid; gap: 2px; }
.luminarium-brand strong {
  font-family: Georgia, "Times New Roman", serif;
  font-size: .94rem;
  font-weight: 500;
  letter-spacing: .065em;
}
.luminarium-brand small {
  color: var(--muted);
  font: 600 .53rem ui-monospace, SFMono-Regular, Consolas, monospace;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.luminarium-orbit {
  position: relative;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(225,189,121,.54);
  border-radius: 50%;
  box-shadow: inset 0 0 18px rgba(225,189,121,.08), 0 0 26px rgba(142,94,210,.08);
}
.luminarium-orbit::before,
.luminarium-orbit::after {
  content: "";
  position: absolute;
  border: 1px solid rgba(225,189,121,.42);
  border-radius: 50%;
  transform: rotate(52deg);
}
.luminarium-orbit::before { width: 25px; height: 10px; }
.luminarium-orbit::after { width: 10px; height: 25px; }
.luminarium-orbit i { width: 5px; height: 5px; border-radius: 50%; background: #f7dfad; box-shadow: 0 0 12px #f8c86e; }
.top-status { max-width: 360px; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .68rem; }
.top-actions { align-items: center; }
.btn, .chip {
  border-color: rgba(255,255,255,.11);
  background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.015));
  box-shadow: inset 0 1px rgba(255,255,255,.035);
}
.btn:hover, .chip:hover { border-color: rgba(225,189,121,.48); background: rgba(225,189,121,.075); }
/* The door into the 3D room is an <a>, not a <button>, so it needs the colour
   and text-decoration the UA gives links stripped back off. */
a.btn { text-decoration: none; color: #f4efe5; display: inline-flex; align-items: center; }
a.btn:hover { color: #ffe6bb; }

/* …and it is the one control in this bar that leaves for somewhere else, so it
   is deliberately not a ghost button: among eight identical ghosts nobody found
   it. Brass edge, faint glow, and an arrow that steps on hover. */
.room-door {
  gap: .45em;
  border-color: rgba(225,189,121,.55);
  background: linear-gradient(180deg, rgba(225,189,121,.16), rgba(225,189,121,.05));
  box-shadow: 0 0 0 1px rgba(225,189,121,.08), 0 2px 18px rgba(225,189,121,.14);
  color: #ffdfae;
}
.room-door:hover {
  border-color: rgba(240,206,140,.9);
  background: linear-gradient(180deg, rgba(225,189,121,.28), rgba(225,189,121,.12));
  color: #fff1d6;
}
.room-door span { transition: transform .18s ease; }
.room-door:hover span { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) { .room-door span { transition: none; } }
.btn.primary {
  background: linear-gradient(135deg, #f1d59c, #c99b55);
  color: #151006;
  border-color: #edca87;
  box-shadow: 0 0 26px rgba(225,189,121,.12), inset 0 1px rgba(255,255,255,.42);
}

.studio { grid-template-columns: minmax(0,1fr) 390px; }
.workspace { padding: 15px 18px 18px; gap: 9px; }
.stage-toolbar { padding: 0 2px; }
.stage-toolbar .label { color: #bab3a8; }
.output-badge { border-color: rgba(225,189,121,.22) !important; color: #d6c39f !important; }
.ratio-btn.active { color: #f0d599; border-color: rgba(225,189,121,.42); background: rgba(225,189,121,.075); }
.stage-shell {
  border-color: rgba(225,189,121,.22);
  border-radius: 16px;
  background:
    linear-gradient(rgba(255,255,255,.025), transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025), transparent 1px),
    #020204;
  background-size: 30px 30px;
  box-shadow: 0 28px 90px #000, 0 0 0 1px rgba(255,255,255,.025), inset 0 0 70px #000;
}
.stage-shell::before,
.stage-shell::after {
  content: "";
  position: absolute;
  z-index: 4;
  width: 18px;
  height: 18px;
  pointer-events: none;
  border-color: rgba(225,189,121,.6);
}
.stage-shell::before { top: 9px; left: 9px; border-top: 1px solid; border-left: 1px solid; }
.stage-shell::after { right: 9px; bottom: 9px; border-right: 1px solid; border-bottom: 1px solid; }
#stage { filter: saturate(.94) contrast(1.04); }
.stage-badge { color: #e7dece; border-color: rgba(225,189,121,.22); background: rgba(6,6,8,.76); backdrop-filter: blur(10px); }

.inspector {
  position: relative;
  border-left-color: rgba(225,189,121,.18);
  background: rgba(11,10,14,.92);
  scrollbar-color: #514737 transparent;
}
.inspector-head {
  min-height: 63px;
  padding: 13px 16px;
  border-bottom-color: rgba(225,189,121,.14);
  background: rgba(11,10,14,.92);
}
.inspector-head > span { display: grid; gap: 4px; }
.inspector-head strong { color: #f1e8d8; font-family: Georgia, "Times New Roman", serif; font-size: .86rem; font-weight: 500; letter-spacing: .08em; }
.inspector-head small { color: var(--acid); font: 600 .56rem ui-monospace, monospace; letter-spacing: .13em; text-transform: uppercase; }
.inspector-close { display: none; border: 0; background: transparent; color: var(--muted); font-size: 1.5rem; cursor: pointer; }
.inspector-head-actions { display:flex; align-items:center; gap:7px; }
.mobile-global-reset { display:none; border:1px solid rgba(225,189,121,.24); border-radius:7px; padding:.4rem .55rem; background:transparent; color:#b9aa8c; font-size:.61rem; cursor:pointer; }
.mobile-global-reset:hover { border-color:rgba(225,189,121,.55); color:#ead09a; }
.console-tabs {
  position: sticky;
  top: 63px;
  z-index: 3;
  display: grid;
  grid-template-columns: repeat(4,1fr);
  padding: 8px;
  gap: 4px;
  border-bottom: 1px solid rgba(225,189,121,.14);
  background: rgba(11,10,14,.94);
  backdrop-filter: blur(16px);
}
.console-tab {
  min-height: 34px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: #827d76;
  font-size: .65rem;
  cursor: pointer;
}
.console-tab:hover { color: #ddd5c8; background: rgba(255,255,255,.03); }
.console-tab.active { color: #f0d69e; border-color: rgba(225,189,121,.3); background: rgba(225,189,121,.075); }
[data-panel-group] { display: none; }
body:not([data-console]) [data-panel-group="explore"],
body[data-console="explore"] [data-panel-group="explore"],
body[data-console="shape"] [data-panel-group="shape"],
body[data-console="sequence"] [data-panel-group="sequence"],
body[data-console="export"] [data-panel-group="export"] { display: block; }
.panel { border-bottom-color: rgba(225,189,121,.12); }
.panel summary { color: #d8d0c4; font-size: .67rem; letter-spacing: .14em; }
.panel summary::after { color: #756d61; }
.panel[open] summary::after { color: var(--acid); }

.preset-grid { gap: 10px; }
.preset {
  position: relative;
  min-height: 123px;
  padding: 7px;
  overflow: hidden;
  border-color: rgba(255,255,255,.1);
  background: rgba(255,255,255,.015);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.preset:hover { transform: translateY(-2px); border-color: rgba(225,189,121,.38); }
.preset.active { border-color: #d6ae69; box-shadow: 0 0 0 1px rgba(225,189,121,.22), 0 12px 28px #0008; }
.preset-swatch { height: 69px; margin-bottom: 8px; border-radius: 7px; box-shadow: inset 0 0 20px #0005; }
.preset strong { display: block; padding: 0 3px; color: #f2eadf; font-size: .72rem; }
.preset small { display: block; padding: 3px; color: #817c74; font-size: .56rem; }
.luminarium-wide { width: 100%; margin-top: 10px; color: #ead39e; }
.luminarium-wide.is-running { border-color: #d9b56e; background: rgba(225,189,121,.1); }

.macro-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; }
.macro-field { margin-top: 4px; padding: 8px 0; }
.macro-field label { color: #d4ccbf; }
.macro-field input { accent-color: #d7ad68; }
.field label span { color: #e3bd77; }
input[type=range] { accent-color: #d7ad68; }
select, input[type=text] { border-color: rgba(255,255,255,.11); background: #151419; }
.mode-chip.active, .src-chip.active { border-color: rgba(225,189,121,.46); color: #f0d59c; background: rgba(225,189,121,.075); }
.effect { border-color: rgba(255,255,255,.09); }

.transport {
  z-index: 13;
  border-top-color: rgba(225,189,121,.18);
  background: rgba(7,7,10,.94);
  backdrop-filter: blur(24px);
}
.upload-icon { color: #e3bb72; border-color: rgba(225,189,121,.35); background: rgba(225,189,121,.06); }
#tPlay { background: linear-gradient(135deg,#f1d59c,#c99b55); color: #151006; box-shadow: 0 0 24px rgba(225,189,121,.15); }
#tLoop { color: #deb973; }
.waveform { opacity: .78; }

.mobile-scrim { display: none; }
.tutorial-backdrop {
  position: fixed; z-index: 80; inset: 0; display: grid; place-items: center;
  padding: 20px; background: rgba(2,2,4,.8); backdrop-filter: blur(14px);
}
.tutorial-backdrop[hidden] { display: none; }
.tutorial-dialog {
  position: relative; width: min(620px,100%); min-height: 520px; padding: 34px;
  overflow: hidden; border: 1px solid rgba(225,189,121,.32); border-radius: 18px;
  background: radial-gradient(circle at 92% 0,rgba(116,73,164,.14),transparent 38%),#0c0b0f;
  box-shadow: 0 36px 110px #000, inset 0 1px rgba(255,255,255,.04);
}
.tutorial-dialog::before { content:""; position:absolute; inset:10px; pointer-events:none; border:1px solid rgba(225,189,121,.08); border-radius:12px; }
.tutorial-close { position:absolute; z-index:2; top:16px; right:18px; border:0; background:transparent; color:#9b9489; font-size:1.7rem; cursor:pointer; }
.tutorial-kicker { color:var(--acid); font:600 .59rem ui-monospace,monospace; letter-spacing:.18em; text-transform:uppercase; }
.tutorial-dialog h2 { margin:8px 0 9px; color:#f4efe5; font:500 clamp(1.65rem,5vw,2.25rem) Georgia,serif; }
.tutorial-intro { max-width:500px; margin:0; color:#aaa298; font-size:.8rem; line-height:1.6; }
.tutorial-progress { display:flex; gap:7px; margin:24px 0; }
.tutorial-dot { width:34px; height:3px; padding:0; border:0; border-radius:3px; background:#343139; cursor:pointer; }
.tutorial-dot.active { background:linear-gradient(90deg,#e8c982,#a482ed); box-shadow:0 0 12px rgba(225,189,121,.25); }
.tutorial-steps { min-height:238px; }
.tutorial-step { display:none; grid-template-columns:58px 1fr; gap:18px; align-items:start; animation:tutorial-in .25s ease; }
.tutorial-step.active { display:grid; }
.tutorial-number { color:rgba(225,189,121,.55); font:400 1.8rem Georgia,serif; }
.tutorial-step h3 { margin:1px 0 10px; color:#f0e7d8; font:500 1.25rem Georgia,serif; }
.tutorial-step p { margin:0; color:#b4ada3; font-size:.83rem; line-height:1.75; }
.tutorial-step strong { color:#ead09a; }
.tutorial-demo {
  width:100%; display:grid; grid-template-columns:36px 1fr; grid-template-rows:auto auto; column-gap:11px;
  margin-top:20px; padding:12px 14px; text-align:left; cursor:pointer;
  border:1px solid rgba(225,189,121,.3); border-radius:10px; color:#f0e7d8;
  background:linear-gradient(110deg,rgba(225,189,121,.1),rgba(146,105,217,.08));
}
.tutorial-demo:hover { border-color:rgba(225,189,121,.7); background:linear-gradient(110deg,rgba(225,189,121,.17),rgba(146,105,217,.12)); }
.tutorial-demo span { grid-row:1/3; align-self:center; display:grid; place-items:center; width:34px; height:34px; border-radius:50%; background:#dfbb73; color:#130e07; }
.tutorial-demo strong { color:#f0e7d8; font-size:.75rem; }
.tutorial-demo small { color:#958d82; font-size:.62rem; margin-top:2px; }
.tutorial-demo:disabled { opacity:.55; cursor:wait; }
.tutorial-note { margin-top:18px; padding:12px 14px; border-left:2px solid #d7ad68; background:rgba(225,189,121,.06); color:#c7bda9; font-size:.74rem; }
.tutorial-actions { display:grid; grid-template-columns:90px 1fr 90px; align-items:center; gap:12px; margin-top:24px; }
.tutorial-actions span { text-align:center; color:#777169; font:600 .62rem ui-monospace,monospace; }
@keyframes tutorial-in { from { opacity:0; transform:translateX(10px); } }
body.clean .pm-nav,
body.clean .pm-nav__drawer,
body.clean .topbar,
body.clean .inspector,
body.clean .transport,
body.clean .stage-toolbar { display: none !important; }
body.clean .app { display: block; height: 100dvh; }
body.clean .studio,
body.clean .workspace,
body.clean .stage-shell { width: 100%; height: 100%; padding: 0; border: 0; border-radius: 0; }

@media (max-width: 1100px) and (min-width: 901px) {
  .studio { grid-template-columns: minmax(0,1fr) 340px; }
  .top-status { display: none; }
  .top-actions .btn { padding-inline: .58rem; }
}

@media (max-width: 900px) {
  body { overflow: hidden; }
  body::before { display: none; }
  .app { height: calc(100dvh - var(--pm-nav-h)); min-height: 0; padding-bottom: 78px; }
  .topbar { position: relative; top: 0; height: 58px; padding: 0 10px; }
  .luminarium-brand strong { font-size: .8rem; }
  .luminarium-brand small, .luminarium-orbit { display: none; }
  .top-actions { gap: 5px; }
  .top-actions #surpriseBtn { display: inline-flex; font-size: .65rem; }
  .top-actions #saveBtn, .top-actions #pngBtn, .top-actions #fsBtn2, .top-actions #surpriseBtn { display: none; }
  .tutorial-trigger { display:inline-flex; padding-inline:.55rem; font-size:.62rem; }
  #mobileControls { display: inline-flex; }
  .studio { height: 100%; display: block; }
  .workspace { height: 100%; padding: 8px 9px 6px; justify-content: center; }
  .stage-toolbar { flex: none; min-height: 29px; }
  .output-badge { display: none; }
  .stage-shell {
    width: 100%;
    height: auto;
    min-height: 0;
    max-height: calc(100% - 38px);
    flex: none;
    aspect-ratio: var(--stage-ratio, 1.7778);
    border-radius: 12px;
  }
  .inspector {
    position: fixed;
    z-index: 31;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-height: min(74dvh, 680px);
    overflow-y: auto;
    border: 1px solid rgba(225,189,121,.25);
    border-bottom: 0;
    border-radius: 18px 18px 0 0;
    box-shadow: 0 -28px 80px #000;
    transform: translateY(105%);
    transition: transform .28s cubic-bezier(.22,.75,.2,1);
  }
  body.controls-open .inspector { transform: translateY(0); }
  .inspector-head { top: 0; min-height: 58px; border-radius: 18px 18px 0 0; }
  .inspector-head::before { content: ""; position: absolute; top: 7px; left: calc(50% - 20px); width: 40px; height: 3px; border-radius: 3px; background: #514a40; }
  .inspector-close { display: block; }
  .mobile-global-reset { display:block; }
  .console-tabs { top: 58px; }
  .mobile-scrim { position: fixed; z-index: 30; inset: 0; background: rgba(0,0,0,.58); backdrop-filter: blur(3px); }
  body.controls-open .mobile-scrim { display: block; }
  .tutorial-dialog { min-height:0; padding:28px 22px 22px; }
  .tutorial-steps { min-height:270px; }
  .preset-grid, .mode-grid { display: grid; grid-template-columns: 1fr 1fr; overflow: visible; }
  .preset { min-width: 0; min-height: 116px; }
  .mode-chip { min-width: 0; }
  .macro-grid { grid-template-columns: 1fr 1fr; }
  .transport { height: 78px; grid-template-columns: minmax(0,1fr) auto; padding: 8px 10px max(8px,env(safe-area-inset-bottom)); }
  .waveform { height: 20px; margin: 0; }
  #waveZoom { display: none; }
  .capture #cleanBtnBottom { display: none; }
  .capture .btn { min-height: 42px; }
  body.clean .app { padding: 0; }
}

@media (max-width: 520px) {
  .luminarium-brand { max-width: 112px; }
  .luminarium-brand strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .tutorial-trigger { max-width:92px; white-space:normal; line-height:1.1; }
  .stage-toolbar .label { font-size: .58rem; }
  .ratio-btn { padding-inline: .4rem; }
  .macro-grid { grid-template-columns: 1fr; gap: 0; }
  .preset-swatch { height: 62px; }
}

@media (prefers-reduced-motion: reduce) {
  .preset, .inspector { transition: none; }
  .luminarium-orbit { animation: none; }
}