:root {
  --bg: #05060c;
  --glass: rgba(14, 16, 34, 0.72);
  --line: rgba(170, 180, 255, 0.16);
  --text: #e6e9ff;
  --muted: rgba(220, 225, 255, 0.5);
  --cyan: #5eead4;
  --violet: #a78bfa;
  --pink: #f472b6;
  --amber: #fbbf24;
  --mono: "JetBrains Mono", ui-monospace, monospace;
  --sans: Inter, system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--bg); color: var(--text); font: 14px/1.4 var(--sans); }
button { font: inherit; color: inherit; cursor: pointer; }

#stage { position: fixed; inset: 0; width: 100%; height: 100%; touch-action: none; cursor: crosshair; }
#stage:active { cursor: grabbing; }

.brand {
  position: fixed; top: 18px; left: 20px; z-index: 2;
  font: 12px var(--mono); color: var(--muted); display: flex; gap: 8px;
}
.brand a { color: inherit; text-decoration: none; }
.brand a:hover { color: var(--text); }
.brand b { color: var(--text); font-weight: 500; }

.tex {
  position: fixed; top: 46px; left: 16px; right: 16px; margin: 0 auto; width: fit-content; z-index: 2;
  max-width: calc(100vw - 32px); overflow-x: auto; overflow-y: hidden;
  font-size: 26px; text-align: center; white-space: nowrap; pointer-events: none;
  text-shadow: 0 0 24px rgba(167, 139, 250, 0.55);
  scrollbar-width: none;
}
.tex .dtex { font-size: 17px; color: var(--amber); margin-top: 6px; text-shadow: 0 0 18px rgba(251, 191, 36, 0.4); }

.params {
  position: fixed; top: 18px; right: 18px; z-index: 3; width: 260px;
  padding: 10px 12px; border: 1px solid var(--line); border-radius: 14px;
  background: var(--glass); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  display: none; flex-direction: column; gap: 6px;
}
.params.on { display: flex; }
.param { display: grid; grid-template-columns: 44px 1fr 46px 26px; align-items: center; gap: 8px; font: 12px var(--mono); }
.param .pn { color: var(--violet); font-style: italic; }
.param output { text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; }
.param input[type=range] { width: 100%; accent-color: var(--violet); }
.play {
  width: 26px; height: 26px; border-radius: 8px; border: 1px solid var(--line); background: transparent;
  font-size: 10px; color: var(--muted); padding: 0;
}
.play.on { color: var(--bg); background: var(--violet); border-color: var(--violet); }

.dock {
  position: fixed; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 3;
  width: min(760px, calc(100vw - 32px)); display: flex; flex-direction: column; gap: 10px;
}
.bar {
  display: flex; align-items: center; gap: 6px; padding: 6px 6px 6px 14px;
  border: 1px solid var(--line); border-radius: 16px; background: var(--glass);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(167, 139, 250, 0.06) inset;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.bar:focus-within { border-color: rgba(167, 139, 250, 0.55); box-shadow: 0 10px 40px rgba(0, 0, 0, 0.45), 0 0 28px rgba(167, 139, 250, 0.18); }
.fx { font: italic 20px Georgia, serif; color: var(--violet); }
.bar input {
  flex: 1; min-width: 0; height: 40px; border: 0; outline: 0; background: transparent;
  color: var(--text); font: 15px var(--mono);
}
.bar input::placeholder { color: rgba(220, 225, 255, 0.28); }
.ghost, .go { height: 40px; padding: 0 14px; border-radius: 11px; border: 1px solid var(--line); background: transparent; }
.ghost { font: italic 16px Georgia, serif; color: var(--muted); }
.ghost.on { color: var(--bg); background: var(--amber); border-color: var(--amber); }
.ghost:disabled { opacity: 0.3; cursor: default; }
.go { border: 0; font-weight: 600; color: #0b0718; background: linear-gradient(120deg, var(--cyan), var(--violet) 55%, var(--pink)); }
.go:hover { filter: brightness(1.1); }

.err {
  display: none; padding: 8px 12px; border-radius: 10px; font: 12px var(--mono);
  color: #fecdd3; background: rgba(120, 20, 50, 0.45); border: 1px solid rgba(244, 114, 182, 0.35);
}
.err.on { display: block; }

.chips { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip {
  flex: none; padding: 6px 11px; border-radius: 999px; border: 1px solid var(--line);
  background: rgba(14, 16, 34, 0.55); font-size: 12px; color: var(--muted); transition: all 0.2s;
}
.chip:hover { color: var(--text); border-color: rgba(167, 139, 250, 0.45); }
.chip.on { color: var(--text); border-color: var(--violet); background: rgba(167, 139, 250, 0.16); }

.hint { margin: 0; text-align: center; font: 11px var(--mono); color: rgba(220, 225, 255, 0.28); }
kbd { font: inherit; padding: 0 4px; border: 1px solid var(--line); border-radius: 4px; }

@media (max-width: 640px) {
  .brand { top: 12px; left: 16px; }
  .tex { top: 36px; font-size: 19px; }
  .params { top: auto; right: 16px; left: 16px; width: auto; bottom: calc(150px + env(safe-area-inset-bottom)); }
  .hint { display: none; }
  .ghost, .go { padding: 0 11px; }
}