/* Motion desk: gallery, stage and transport */
:root { --paper:#f3f2ed; --ink:#141414; --muted:#72726c; --line:rgba(20,20,20,.18); --acid:#e7ff00; --mono:"IBM Plex Mono","SFMono-Regular",Menlo,Monaco,"Courier New",monospace; }
body { background:var(--paper); color:var(--ink); font-family:var(--mono); grid-template-rows:54px minmax(0,1fr) auto; }
button,a,input { font-family:var(--mono); }
#topbar { padding:0 20px; border-bottom:1px solid var(--line); gap:18px; background:var(--paper); }
#logo { font-size:16px; font-weight:600; letter-spacing:-.07em; margin:0; }
#subtitle { font-size:11px; font-weight:400; color:var(--muted); }
#top-actions { gap:2px; }
.action-btn,#lib-toggle-btn { min-width:54px; padding:3px 7px; border:0; }
.action-icon { font-size:18px; font-weight:400; }
.action-label { font-size:9px; font-weight:400; }
.action-btn:hover,#lib-toggle-btn:hover { opacity:1; color:#000; background:radial-gradient(ellipse at center,#e7ff00 5%,transparent 74%); }
#rec-circle { width:21px; height:21px; }
#sidebar.open { width:250px; border-right:1px solid var(--line); }
#sidebar { background:var(--paper); }
#lib-label { padding:17px 18px 12px; font-size:11px; font-weight:400; border-bottom:1px solid var(--line); text-transform:uppercase; }
#lib-label span { line-height:1.3; }
#lib-add-btn { padding:12px 18px; font-size:11px; border-bottom:1px solid var(--line); }
#lib-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-content:start; gap:0; padding:0; }
.lib-group-header { grid-column:1/-1; padding:12px 18px; color:var(--muted); font-size:10px; border-bottom:1px solid var(--line); }
.lib-item { height:128px; padding:16px 12px 10px; border:0; border-right:1px solid var(--line); border-bottom:1px solid var(--line); background:transparent; }
.lib-item:nth-child(2n+1) { border-right:0; }
.lib-item:hover { background:radial-gradient(ellipse at 50% 52%,rgba(231,255,0,.8),transparent 75%); }
.lib-item svg { height:73px; max-width:78%; }
.lib-name { font-size:9px; margin-top:9px; color:var(--muted); }
.lib-del { width:18px; height:18px; top:4px; right:4px; border-radius:50%; }
#stage-wrap { position:relative; padding:28px 30px 34px; background:#e5e4dd; }
#stage-wrap::before { content:"02  /  COMPOSICIÓN EN MOVIMIENTO"; position:absolute; z-index:1; top:10px; left:30px; font-size:10px; color:var(--muted); pointer-events:none; }
#stage { border:0; box-shadow:0 1px 14px rgba(20,20,20,.1); }
#empty { color:var(--muted); }
#empty .ei { font-size:22px; font-weight:400; }
#empty .et { font-size:12px; }
#compose-toolbar { border-color:var(--line); }
#botbar { padding:13px 20px; border-top:1px solid var(--line); background:var(--paper); }
.mode-btn,#shuffle-btn,#fade-btn,#pulse-btn,.mode-section-label { font-size:10px; font-weight:400; border:0; }
.mode-btn.active { color:var(--ink); background:radial-gradient(ellipse at center,var(--acid),transparent 76%); }
.mode-btn:hover,#shuffle-btn:hover,#pulse-btn:hover,.mode-section-label:hover { opacity:1; background:radial-gradient(ellipse at center,var(--acid),transparent 78%); }
.slider-label,.slider-ticks,#count { font-size:9px; color:var(--muted); }
#settings-panel { background:var(--paper); }
@media(max-width:768px) {
  body { grid-template-rows:48px minmax(0,1fr) auto; }
  #topbar { padding:0 9px; gap:8px; }
  #logo { font-size:11px; }
  #top-actions { margin-left:auto; }
  .action-btn,#lib-toggle-btn { min-width:38px; padding:3px; }
  .action-label { font-size:8px; }
  #sidebar.open { width:min(80vw,270px); }
  #stage-wrap { padding:24px 10px 10px; }
  #stage-wrap::before { left:12px; top:7px; font-size:9px; }
  #botbar { padding:8px; }
}

#logo { font-size:12px; font-weight:400; letter-spacing:0; }
#bot-row2 { display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.canvas-color { display:inline-flex; align-items:center; gap:6px; font-size:10px; color:var(--muted); white-space:nowrap; }
.canvas-color input { width:22px; height:22px; padding:0; border:1px solid var(--line); background:none; cursor:pointer; }
@media(max-width:768px){.canvas-color{font-size:9px}.canvas-color input{width:18px;height:18px}}

#logo { font-size:12px; font-weight:400; letter-spacing:0; }
#bot-row2 { display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.canvas-color { display:inline-flex; align-items:center; gap:6px; font-size:10px; color:var(--muted); white-space:nowrap; }
.canvas-color input { width:22px; height:22px; padding:0; border:1px solid var(--line); background:none; cursor:pointer; }
@media(max-width:768px){.canvas-color{font-size:9px}.canvas-color input{width:18px;height:18px}}

/* Library thumbnails use one ink color; source SVGs remain available for editing. */
.lib-item svg { filter: grayscale(1) brightness(0) !important; }

#svg-effects { display:flex; align-items:center; gap:9px; min-height:21px; }
.effect-btn { border:0; background:transparent; color:var(--muted); font:400 10px var(--mono); padding:3px 4px; cursor:pointer; white-space:nowrap; }
.effect-btn:hover,.effect-btn.active { color:var(--ink); background:radial-gradient(ellipse at center,var(--acid),transparent 78%); }
.effect-strength { display:inline-flex; align-items:center; gap:6px; color:var(--muted); font:400 9px var(--mono); margin-left:8px; white-space:nowrap; }
.effect-strength input { width:66px; }
.sp-effects { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.sp-effect-buttons { display:flex; flex-wrap:wrap; gap:3px; }
@media(max-width:768px){#svg-effects{display:none}.sp-effects .effect-btn{font-size:10px}}

#shape-effects { display:flex; align-items:center; gap:9px; min-height:21px; }
@media(max-width:768px){#shape-effects{display:none}}