/* Consumer presentation only. Never restyle canonical SVG paths or roots. */
#motif-app{min-width:0;box-sizing:border-box;container-type:inline-size}
#motif-app,#motif-app *{box-sizing:border-box}
#motif-app #motif-maker{max-width:100%;min-width:0;margin-inline:auto}
#motif-app .mm-toolbar,#motif-app .mm-card,#motif-app .mm-canvas-wrap,#motif-app .mm-playbar{min-width:0;max-width:100%}
#motif-app .mm-canvas-wrap{overflow:hidden}
#motif-app #mm-o{display:block;width:auto;max-width:100%;height:auto;object-fit:contain}
#motif-app .lg-mg-error{margin:12px 0;padding:10px 12px;border:1px solid #e7bd7b;border-radius:8px;background:#fff8e9;color:#735019;font:13px/1.5 system-ui,sans-serif}
#motif-app .lg-mg-error[hidden]{display:none!important}
@container (max-width:640px){
 #motif-maker{padding:12px 10px 22px}
 #motif-maker .mm-toolbar{padding:10px;gap:8px}
 #motif-maker .mm-card{padding:12px}
 #motif-maker .mm-canvas-wrap{padding:6px;min-height:0}
}


/* =========================================================
   0.1.1 — LG RESEARCH / WORDS / PROFILE VISUAL LANGUAGE
   Visual layer only. Musical rendering and generation stay untouched.
   The WordPress theme remains authoritative over the outer app width.
========================================================= */
#motif-app{
  --lg-accent:#F6A400;
  --lg-blue:#0A84FF;
  --lg-ink:#171717;
  --lg-muted:#62666d;
  --lg-line:#d8d8d8;
  --lg-line-soft:#ececec;
  --lg-paper:#ffffff;
  --lg-soft:#f7f7f7;
  min-width:0;
  color:var(--lg-ink);
  background:transparent;
  font-family:inherit;
  font-size:16.5px;
  line-height:1.62;
}

#motif-app #motif-maker{
  --ink:var(--lg-ink);
  --muted:var(--lg-muted);
  --line:var(--lg-line);
  --line-strong:var(--lg-ink);
  --panel:transparent;
  --score:var(--lg-paper);
  --teal:var(--lg-blue);
  --teal-soft:rgba(10,132,255,.07);
  --amber:var(--lg-accent);
  --shadow:none;
  width:100%;
  max-width:100%;
  margin:0 0 3rem;
  padding:0 0 2rem;
  color:var(--lg-ink);
  background:transparent;
  font-family:inherit;
  font-size:inherit;
  line-height:inherit;
}

#motif-app #motif-maker button{
  font:inherit;
}

/* Flat functional toolbar, matching the Research-derived academic modules. */
#motif-app #motif-maker .mm-toolbar{
  width:100%;
  min-height:0;
  margin:0 0 2rem;
  padding:0 0 1rem;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:8px;
  background:transparent;
  border:0;
  border-bottom:1px solid var(--lg-line);
  border-radius:0;
  box-shadow:none;
}

#motif-app #motif-maker .mm-toolbar-actions{
  gap:8px;
}

#motif-app #motif-maker .tb-btn{
  --btn-size:48px;
  --lg-mg-local-scale:.65;
  position:relative;
  width:var(--btn-size);
  height:var(--btn-size);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0;
  color:var(--lg-ink);
  background:var(--lg-paper);
  border:1px solid var(--lg-ink);
  border-radius:6px;
  box-shadow:none;
  transform:none;
  cursor:pointer;
  appearance:none;
  transition:color .12s ease,border-color .12s ease,background .12s ease;
}

#motif-app #motif-maker .tb-btn:hover:not(:disabled){
  color:var(--lg-blue);
  background:var(--lg-soft);
  border-color:var(--lg-blue);
  box-shadow:none;
  transform:none;
}

#motif-app #motif-maker .tb-btn:active:not(:disabled){
  box-shadow:inset 0 -2px 0 var(--lg-line);
  transform:none;
}

#motif-app #motif-maker .tb-btn.is-playing{
  color:var(--lg-ink);
  background:var(--lg-paper);
  border-color:var(--lg-ink);
  box-shadow:inset 0 -3px 0 var(--lg-accent);
}

#motif-app #motif-maker .tb-btn:disabled{
  opacity:.42;
  cursor:not-allowed;
  box-shadow:none;
}

#motif-app #motif-maker button:focus-visible{
  outline:2px solid var(--lg-blue);
  outline-offset:3px;
}

/* Library renders the canonical SVG size; only this holder gets a local multiplier. */
#motif-app #motif-maker .tb-icon{
  width:auto;
  height:auto;
  position:static;
  inset:auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  overflow:visible;
  line-height:0;
}

#motif-app #motif-maker .tb-btn > .tb-icon{
  position:static;
  inset:auto;
  width:auto;
  height:auto;
}

#motif-app #motif-maker .lg-mg-icon-artwork{
  display:block;
  flex:none;
  min-width:0;
  transform-origin:center center;
  transform:scale(var(--lg-mg-local-scale,1));
}

#motif-app #motif-maker .lg-mg-icon-artwork > svg{
  display:block;
  width:auto;
  height:auto;
  max-width:none;
  max-height:none;
  overflow:visible;
  flex:none;
}

/* Result as an editorial section, not a decorative card. */
#motif-app #motif-maker .mm-card{
  width:100%;
  margin:0;
  padding:0;
  color:var(--lg-ink);
  background:transparent;
  border:0;
  border-radius:0;
  box-shadow:none;
}

#motif-app #motif-maker .mm-card-head{
  position:relative;
  display:block;
  width:100%;
  margin:0 0 1.35rem;
  padding:0 0 .7rem;
  color:var(--lg-ink);
  background:transparent;
  border:0;
  border-bottom:1px solid var(--lg-ink);
  border-radius:0;
  box-shadow:none;
}

#motif-app #motif-maker .mm-card-head::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-2px;
  width:34px;
  height:3px;
  border-radius:99px;
  background:var(--lg-accent);
}

#motif-app #motif-maker .mm-card h3{
  margin:0;
  color:var(--lg-ink);
  font-size:.80rem;
  line-height:1.22;
  font-weight:780;
  letter-spacing:.145em;
  text-transform:uppercase;
  text-align:left;
}

/* Musical canvas is a neutral functional surface. */
#motif-app #motif-maker .mm-canvas-wrap{
  width:100%;
  min-height:260px;
  padding:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  background:var(--lg-paper);
  border:1px solid var(--lg-line-soft);
  border-radius:4px;
  box-shadow:none;
}

#motif-app #motif-maker .mm-playbar{
  min-height:48px;
  margin-top:1rem;
  padding-top:1rem;
  border-top:1px solid var(--lg-line-soft);
}

#motif-app .lg-mg-error{
  margin:12px 0;
  padding:10px 12px;
  color:#735019;
  background:#fff8e9;
  border:1px solid #e7bd7b;
  border-radius:4px;
  font-family:inherit;
  font-size:13px;
  line-height:1.5;
}

@media (max-width:640px){
  #motif-app #motif-maker{
    padding:0 0 1.5rem;
    font-size:16px;
  }
  #motif-app #motif-maker .mm-toolbar{
    margin-bottom:1.5rem;
    padding:0 0 .8rem;
    gap:7px;
  }
  #motif-app #motif-maker .tb-btn{
    --btn-size:46px;
    --lg-mg-local-scale:.60;
  }
  #motif-app #motif-maker .mm-card-head{
    margin-bottom:1.1rem;
  }
  #motif-app #motif-maker .mm-canvas-wrap{
    min-height:0;
    padding:6px;
  }
}