:root{
  --bg:#0d0b09; --panel:#17120f; --panel2:#211912; --text:#f4ead8; --muted:#a99b89; --line:rgba(255,255,255,.09);
  --accent:#d8a24f; --controller-accent:#d8a24f; --controller-panel-opacity:.92;
  --family-master:#d8a24f; --family-grid:#7aa6c8; --family-crop:#8cae72; --family-warp:#9c7cc2; --family-motion:#de8b52; --family-audio:#c85d5d; --family-scale:#51b7ad; --family-rotation:#6577d8;
}
*{box-sizing:border-box} body{margin:0;background:radial-gradient(circle at 10% 0%,rgba(216,162,79,.14),transparent 32%),linear-gradient(180deg,#0c0907,#17100c);color:var(--text);font-family:Inter,Segoe UI,Arial,sans-serif;overflow:hidden} .app-shell{display:grid;grid-template-columns:430px 1fr;height:100vh;width:100vw}.sidebar{height:100vh;overflow:auto;padding:18px;background:linear-gradient(180deg,rgba(25,19,14,var(--controller-panel-opacity)),rgba(12,10,8,var(--controller-panel-opacity)));border-right:1px solid var(--line);transition:.25s ease;backdrop-filter:blur(16px)}body.panel-hidden .sidebar{transform:translateX(-104%);opacity:0;pointer-events:none}.brand{display:flex;justify-content:space-between;gap:14px;align-items:flex-start;margin-bottom:14px}.brand h1{font-size:22px;margin:0}.brand p{font-size:12px;color:var(--muted);margin:4px 0 0}.key-hint{font-size:11px;color:var(--accent);border:1px solid var(--line);border-radius:999px;padding:6px 9px}.tabs{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 14px}.tab,button,.button-link{cursor:pointer;border:1px solid var(--line);background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.035));color:var(--text);border-radius:14px;padding:10px 12px;font-weight:700}.tab.active,button:hover{border-color:color-mix(in srgb,var(--controller-accent) 55%,transparent);box-shadow:0 0 0 1px color-mix(in srgb,var(--controller-accent) 18%,transparent)}.tab-panel{display:none;border:1px solid var(--line);background:rgba(255,255,255,.025);border-radius:18px;padding:14px;margin-bottom:18px}.tab-panel.active{display:block}.tab-panel h2{margin:0 0 12px;font-size:18px}.panel-card,.router-card,.theme-section,.performance-card,.hint-box{border:1px solid var(--line);background:rgba(255,255,255,.035);border-radius:16px;padding:12px;margin:12px 0}.panel-card h3,.router-card h3,.theme-section h3,.performance-card h3{margin:0 0 10px;font-size:14px;color:var(--controller-accent)}label{display:block;margin:10px 0;padding:8px 10px;border-radius:12px;background:rgba(255,255,255,.025);border:1px solid rgba(255,255,255,.045);font-size:13px}input[type=range],select,input[type=text],input[type=file],input[type=color]{width:100%;margin-top:7px}input[type=range]{accent-color:var(--controller-accent)}select,input[type=text]{background:#100d0b;color:var(--text);border:1px solid var(--line);border-radius:10px;padding:9px}input[type=color]{height:42px;padding:3px;background:#100d0b;border:1px solid var(--line);border-radius:12px}.row{display:grid;gap:8px;margin:9px 0}.row.two{grid-template-columns:1fr 1fr}.row.three{grid-template-columns:1fr 1fr 1fr}.row.four{grid-template-columns:1fr 1fr 1fr 1fr}.row.single{grid-template-columns:1fr}.grid2{display:grid;grid-template-columns:1fr 1fr;gap:8px}.checks{display:grid;gap:6px}.checks.two{grid-template-columns:1fr 1fr}.checks.single{grid-template-columns:1fr}.checks label{margin:0}.status{font-size:12px;color:var(--muted);margin:6px 0}.meter{height:10px;background:rgba(255,255,255,.06);border-radius:999px;overflow:hidden}.meter span{display:block;height:100%;width:0;background:var(--controller-accent)}.mini-meters{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px;font-size:11px;color:var(--muted);margin:8px 0}.router-grid{display:grid;gap:12px}.nano-layout{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.nano-col{border:1px solid var(--line);border-radius:14px;padding:10px;background:rgba(255,255,255,.025)}.nano-col b,.nano-col span,.nano-col em{display:block}.nano-col b{font-size:13px;margin-bottom:6px}.nano-col span,.nano-col em{font-size:11px;color:var(--muted);margin:3px 0}.mini-table{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:8px}.mini-table span{font-size:11px;color:var(--muted);background:rgba(255,255,255,.04);border-radius:9px;padding:6px}.map-list{display:grid;gap:6px}.map-item{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center;border:1px solid var(--line);border-radius:12px;padding:8px;background:rgba(255,255,255,.025);font-size:12px}.stage-wrap{position:relative;height:100vh;background:#000;overflow:hidden}#stage{width:100%;height:100%;display:block}.hidden-canvas{display:none}.hud{position:absolute;left:16px;bottom:16px;white-space:pre;font:12px/1.35 ui-monospace,Consolas,monospace;color:rgba(255,255,255,.8);background:rgba(0,0,0,.42);border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:10px;pointer-events:none}.floating-show{display:none;position:fixed;left:14px;top:14px;z-index:10;width:42px;height:42px;border-radius:50%;background:rgba(0,0,0,.55);color:#fff}body.panel-hidden .floating-show{display:block}.theme-carpetRed{--controller-accent:#b9473f}.theme-luriEarth{--controller-accent:#b98b52}.theme-indigoBlue{--controller-accent:#5b82d6}.theme-minimalBlack{--controller-accent:#f0f0f0}.theme-highContrast{--controller-accent:#ffd500}.theme-section{border-left:4px solid var(--controller-accent)}body.family-color-on .nano-col:nth-child(1){border-top:3px solid var(--family-master)}body.family-color-on .nano-col:nth-child(2){border-top:3px solid var(--family-grid)}body.family-color-on .nano-col:nth-child(3){border-top:3px solid var(--family-crop)}body.family-color-on .nano-col:nth-child(4){border-top:3px solid var(--family-warp)}body.family-color-on .nano-col:nth-child(5){border-top:3px solid var(--family-motion)}body.family-color-on .nano-col:nth-child(6){border-top:3px solid var(--family-audio)}body.family-color-on .nano-col:nth-child(7){border-top:3px solid var(--family-scale)}body.family-color-on .nano-col:nth-child(8){border-top:3px solid var(--family-rotation)}@media(max-width:900px){.app-shell{grid-template-columns:1fr}.sidebar{position:fixed;z-index:5;width:min(94vw,430px)}.grid2,.checks.two,.nano-layout{grid-template-columns:1fr}}


/* =========================================================
   V5.1.6 UI RESET LOCKED
   UI-only patch. Do not change engine behavior.
   ========================================================= */

:root{
  --ui-width: 430px;
  --ui-radius: 18px;
}

/* Canvas/render layer is independent and always fullscreen */
#stage,
canvas#stage {
  position: fixed !important;
  inset: 0 !important;
  left: 0 !important;
  top: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  display: block !important;
  z-index: 0 !important;
  background: #000 !important;
}

/* Internal buffers never participate in layout */
#sourceBuffer,
#thresholdBuffer,
#edgeBuffer,
#lastFrame {
  display: none !important;
}

/* App layer becomes overlay shell, not a layout column */
#app.app-shell,
.app-shell {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  display: block !important;
  pointer-events: none !important;
  background: transparent !important;
  z-index: 10 !important;
}

/* Sidebar stays the professional controller panel */
#panel.sidebar,
.sidebar {
  position: fixed !important;
  inset: 0 auto 0 0 !important;
  width: var(--ui-width) !important;
  max-width: min(var(--ui-width), 92vw) !important;
  height: 100vh !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  z-index: 30 !important;
  pointer-events: auto !important;
  display: block !important;
  transition: transform .24s ease, opacity .18s ease !important;
  border-right: 1px solid var(--line) !important;
  box-shadow: 18px 0 40px rgba(0,0,0,.32) !important;
}

body.panel-hidden #panel.sidebar,
body.panel-hidden .sidebar {
  transform: translateX(-104%) !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Restore tab navigation. No stacked menus. */
.tabs {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin: 0 0 14px !important;
  align-items: center !important;
}

.tab {
  display: inline-flex !important;
  width: auto !important;
  flex: 0 0 auto !important;
  align-items: center !important;
  justify-content: center !important;
  white-space: nowrap !important;
  border-radius: 14px !important;
}

.tab-body {
  display: block !important;
}

.tab-panel {
  display: none !important;
}

.tab-panel.active {
  display: block !important;
}

/* Mode selector */
/* Basic mode: hide only audio import / audio router / MIDI. Nothing is deleted. */
/* Floating H button */
#showPanel.floating-show,
.floating-show {
  position: fixed !important;
  top: 14px !important;
  left: 14px !important;
  z-index: 40 !important;
  pointer-events: auto !important;
}

body:not(.panel-hidden) #showPanel.floating-show {
  opacity: 0 !important;
  pointer-events: none !important;
}

body.panel-hidden #showPanel.floating-show {
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* Stage wrapper must never reserve a black column */
.stage-wrap,
.stage,
main.stage {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  z-index: 1 !important;
  pointer-events: none !important;
  background: transparent !important;
}

/* HUD above canvas, below panel */
#hud {
  position: fixed !important;
  z-index: 20 !important;
  pointer-events: none !important;
}

/* Keep form controls accessible */
.sidebar input,
.sidebar select,
.sidebar button,
.sidebar label,
.sidebar a,
.sidebar textarea {
  pointer-events: auto !important;
}

/* More polished controller details */
.panel-card,
.tab-panel,
.hint-box,
.status,
.theme-section {
  border-radius: 16px !important;
}

.row.two,
.row.three {
  gap: 8px !important;
}

label {
  line-height: 1.35;
}


/* =========================================================
   V5.1.6 UI RESET LOCKED
   UI-only reset layer: section reset + right-click reset.
   ========================================================= */
.section-reset-toolbar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  margin: 0 0 12px !important;
  padding: 9px 10px !important;
  border: 1px solid rgba(255,255,255,.075) !important;
  border-radius: 14px !important;
  background: rgba(255,255,255,.028) !important;
}

.section-reset-hint {
  color: var(--muted) !important;
  font-size: 11px !important;
  line-height: 1.35 !important;
  flex: 1 1 auto !important;
}

.section-reset-button {
  width: auto !important;
  flex: 0 0 auto !important;
  margin: 0 !important;
  padding: 8px 11px !important;
  border-radius: 999px !important;
  font-size: 11px !important;
  letter-spacing: .035em !important;
  text-transform: uppercase !important;
  border-color: color-mix(in srgb,var(--controller-accent) 34%,transparent) !important;
  background: linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.035)) !important;
}

.ui-reset-flash {
  outline: 2px solid color-mix(in srgb,var(--controller-accent) 72%,transparent) !important;
  box-shadow: 0 0 0 4px color-mix(in srgb,var(--controller-accent) 18%,transparent) !important;
  transition: outline .15s ease, box-shadow .15s ease !important;
}

.ui-reset-toast {
  position: fixed !important;
  left: 18px !important;
  bottom: 18px !important;
  z-index: 60 !important;
  padding: 9px 12px !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  border-radius: 999px !important;
  color: var(--text) !important;
  background: rgba(15,12,10,.88) !important;
  backdrop-filter: blur(12px) !important;
  font-size: 12px !important;
  opacity: 0 !important;
  transform: translateY(8px) !important;
  pointer-events: none !important;
  transition: opacity .18s ease, transform .18s ease !important;
}

.ui-reset-toast.show {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

.sidebar input:not([type="file"]),
.sidebar select,
.sidebar textarea {
  cursor: pointer;
}


/* =========================================================
   V5.1.8 UI REORGANIZED LOCKED
   UI-only changes: Mode selector removed; Symmetry moved into Pattern.
   Engine, rendering, audio, MIDI, reset, and output behavior are untouched.
   ========================================================= */
.pattern-subsection {
  margin-top: 14px;
}

.symmetry-subsection {
  border-left: 3px solid var(--controller-accent);
}

.symmetry-subsection h3 {
  letter-spacing: .01em;
}


/* =========================================================
   Image Is Instrument V5.1.11 — UI FLOW LOCKED
   UI-only information architecture. Engine behavior unchanged.
   ========================================================= */

.tabs {
  position: sticky !important;
  top: -18px !important;
  z-index: 6 !important;
  padding: 12px 0 10px !important;
  background: linear-gradient(180deg, rgba(20,15,12,.98) 78%, rgba(20,15,12,0)) !important;
}

.tab {
  min-height: 36px !important;
  padding: 8px 11px !important;
  font-size: 12px !important;
}

.ui-accordion {
  margin: 0 0 10px !important;
  border: 1px solid var(--line) !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  background: rgba(255,255,255,.025) !important;
}

.ui-accordion > summary {
  list-style: none !important;
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  align-items: center !important;
  gap: 10px !important;
  min-height: 46px !important;
  padding: 11px 13px !important;
  cursor: pointer !important;
  user-select: none !important;
  border-bottom: 1px solid transparent !important;
}

.ui-accordion > summary::-webkit-details-marker {
  display: none !important;
}

.ui-accordion > summary span {
  position: relative !important;
  padding-left: 18px !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  color: var(--text) !important;
}

.ui-accordion > summary span::before {
  content: '›' !important;
  position: absolute !important;
  left: 0 !important;
  top: -1px !important;
  color: var(--controller-accent) !important;
  transform: rotate(0deg) !important;
  transition: transform .16s ease !important;
}

.ui-accordion[open] > summary span::before {
  transform: rotate(90deg) !important;
}

.ui-accordion > summary small {
  max-width: 155px !important;
  color: var(--muted) !important;
  font-size: 10px !important;
  line-height: 1.25 !important;
  text-align: right !important;
  font-weight: 500 !important;
}

.ui-accordion[open] > summary {
  border-bottom-color: var(--line) !important;
  background: rgba(255,255,255,.025) !important;
}

.ui-accordion-body {
  padding: 12px !important;
}

.ui-accordion-body.grid2 {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 8px !important;
}

.accordion-span-full {
  grid-column: 1 / -1 !important;
}

@media(max-width:520px){
  .ui-accordion-body.grid2,
  .ui-accordion-body .grid2 {
    grid-template-columns: 1fr !important;
  }
  .ui-accordion > summary {
    grid-template-columns: 1fr !important;
  }
  .ui-accordion > summary small {
    max-width: none !important;
    padding-left: 18px !important;
    text-align: left !important;
  }
}